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.

1382 lines
26 KiB

  1. .ui.menu {
  2. margin: 1rem 0rem;
  3. background-color: #FFF;
  4. font-size: 0;
  5. font-weight: 400;
  6. box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  7. border-radius: .1875rem;
  8. }
  9. .ui.menu:first-child {
  10. margin-top: 0rem;
  11. }
  12. .ui.menu:last-child {
  13. margin-bottom: 0rem;
  14. }
  15. .ui.menu:after {
  16. content: ".";
  17. display: block;
  18. height: 0;
  19. clear: both;
  20. visibility: hidden;
  21. }
  22. .ui.menu>.item:first-child {
  23. border-radius: .1875em 0 0 .1875em;
  24. }
  25. .ui.menu>.item:last-child {
  26. border-radius: 0 .1875em .1875em 0;
  27. }
  28. .ui.menu .item {
  29. -webkit-user-select: none;
  30. -moz-user-select: none;
  31. -ms-user-select: none;
  32. user-select: none;
  33. -webkit-tap-highlight-color: rgba(0,0,0,0);
  34. vertical-align: middle;
  35. line-height: 1;
  36. text-decoration: none;
  37. -moz-box-sizing: border-box;
  38. -ms-box-sizing: border-box;
  39. box-sizing: border-box;
  40. -webkit-transition: opacity .2s ease,background .2s ease,box-shadow .2s ease;
  41. transition: opacity .2s ease,background .2s ease,box-shadow .2s ease;
  42. }
  43. .ui.menu .item,
  44. .ui.menu .item>a {
  45. color: rgba(0,0,0,.75);
  46. }
  47. .ui.menu .item .item,
  48. .ui.menu .item .item>a {
  49. color: rgba(30,30,30,.7);
  50. }
  51. .ui.menu .item .item .item,
  52. .ui.menu .item .item .item>a {
  53. color: rgba(30,30,30,.6);
  54. }
  55. .ui.menu .dropdown.item .menu .item,
  56. .ui.menu .dropdown.item .menu .item a {
  57. color: rgba(0,0,0,.75);
  58. }
  59. .ui.menu .item .menu a.item:hover,
  60. .ui.menu .item .menu a.item.hover,
  61. .ui.menu .item .menu .link.item:hover,
  62. .ui.menu .item .menu .link.item.hover {
  63. color: rgba(0,0,0,.85);
  64. }
  65. .ui.menu .dropdown.item .menu .item a:hover {
  66. color: rgba(0,0,0,.85);
  67. }
  68. .ui.menu .active.item,
  69. .ui.menu .active.item a {
  70. color: rgba(0,0,0,.85);
  71. border-radius: 0;
  72. }
  73. .ui.menu .item {
  74. position: relative;
  75. display: inline-block;
  76. padding: .83em .95em;
  77. border-top: 0 solid rgba(0,0,0,0);
  78. -webkit-tap-highlight-color: rgba(0,0,0,0);
  79. -moz-user-select: -moz-none;
  80. -khtml-user-select: none;
  81. -webkit-user-select: none;
  82. -ms-user-select: none;
  83. user-select: none;
  84. }
  85. .ui.menu .menu {
  86. margin: 0;
  87. }
  88. .ui.menu .item.left,
  89. .ui.menu .menu.left {
  90. float: left;
  91. }
  92. .ui.menu .item.right,
  93. .ui.menu .menu.right {
  94. float: right;
  95. }
  96. .ui.menu .item:before {
  97. position: absolute;
  98. content: '';
  99. top: 0;
  100. right: 0;
  101. width: 1px;
  102. height: 100%;
  103. background-image: -webkit-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);
  104. background-image: -webkit-linear-gradient(top, rgba(0,0,0,.05) 0, rgba(0,0,0,.1) 50%, rgba(0,0,0,.05) 100%);
  105. background-image: linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);
  106. }
  107. .ui.menu .menu.right .item:before,
  108. .ui.menu .item.right:before {
  109. right: auto;
  110. left: 0;
  111. }
  112. .ui.menu .text.item>*,
  113. .ui.menu .item>p:only-child {
  114. -webkit-user-select: text;
  115. -moz-user-select: text;
  116. -ms-user-select: text;
  117. user-select: text;
  118. line-height: 1.3;
  119. color: rgba(0,0,0,.6);
  120. }
  121. .ui.menu .item>p:first-child {
  122. margin-top: 0;
  123. }
  124. .ui.menu .item>p:last-child {
  125. margin-bottom: 0;
  126. }
  127. .ui.menu:not(.vertical) .item>.button {
  128. position: relative;
  129. top: -.05em;
  130. margin: -.55em 0;
  131. padding-bottom: .55em;
  132. padding-top: .55em;
  133. font-size: .875em;
  134. box-shadow: none;
  135. }
  136. .ui.menu:not(.vertical) .item>.input {
  137. margin-top: -.83em;
  138. margin-bottom: -.83em;
  139. padding-top: .3em;
  140. padding-bottom: .3em;
  141. width: 100%;
  142. }
  143. .ui.menu .item>.input input {
  144. padding-top: .5em;
  145. padding-bottom: .5em;
  146. }
  147. .ui.vertical.menu .item>.input input {
  148. margin: 0;
  149. padding-top: .63em;
  150. padding-bottom: .63em;
  151. }
  152. .ui.vertical.menu .ui.input>.icon {
  153. padding-top: .63em;
  154. }
  155. .ui.menu .header.item {
  156. background-color: rgba(0,0,0,.04);
  157. margin: 0;
  158. }
  159. .ui.vertical.menu .header.item {
  160. font-weight: 700;
  161. }
  162. .ui.menu .dropdown.item .menu {
  163. left: 1px;
  164. margin: 1px 0 0;
  165. min-width: -webkit-calc(99%);
  166. min-width: calc(99%);
  167. box-shadow: 0 1px 1px 1px #DDD;
  168. }
  169. .ui.menu .pointing.dropdown.item .menu {
  170. margin-top: .75em;
  171. }
  172. .ui.menu .simple.dropdown.item .menu {
  173. margin: 0!important;
  174. }
  175. .ui.menu .dropdown.item .menu .item {
  176. width: 100%;
  177. color: rgba(0,0,0,.75);
  178. }
  179. .ui.menu .dropdown.item .menu .active.item {
  180. box-shadow: none!important;
  181. }
  182. .ui.menu .ui.dropdown .menu .item:before {
  183. display: none;
  184. }
  185. .ui.menu .item>.label {
  186. background-color: rgba(0,0,0,.35);
  187. color: #FFF;
  188. margin: -.15em 0 -.15em .5em;
  189. padding: .3em .8em;
  190. vertical-align: baseline;
  191. }
  192. .ui.menu .item>.floating.label {
  193. padding: .3em .8em;
  194. }
  195. .ui.menu .item>img:only-child {
  196. display: block;
  197. max-width: 100%;
  198. margin: 0 auto;
  199. }
  200. .ui.link.menu .item:hover,
  201. .ui.menu .item.hover,
  202. .ui.menu .link.item:hover,
  203. .ui.menu a.item:hover,
  204. .ui.menu .ui.dropdown .menu .item.hover,
  205. .ui.menu .ui.dropdown .menu .item:hover {
  206. cursor: pointer;
  207. background-color: rgba(0,0,0,.02);
  208. }
  209. .ui.menu .ui.dropdown.active {
  210. background-color: rgba(0,0,0,.02);
  211. box-shadow: none;
  212. border-bottom-right-radius: 0;
  213. border-bottom-left-radius: 0;
  214. }
  215. .ui.link.menu .item:active,
  216. .ui.menu .link.item:active,
  217. .ui.menu a.item:active,
  218. .ui.menu .ui.dropdown .menu .item:active {
  219. background-color: rgba(0,0,0,.05);
  220. }
  221. .ui.menu .active.item {
  222. background-color: rgba(0,0,0,.01);
  223. color: rgba(0,0,0,.95);
  224. box-shadow: 0 .2em 0 inset;
  225. }
  226. .ui.vertical.menu .active.item {
  227. border-radius: 0;
  228. box-shadow: .2em 0 0 inset;
  229. }
  230. .ui.vertical.menu>.active.item:first-child {
  231. border-radius: 0 .1875em 0 0;
  232. }
  233. .ui.vertical.menu>.active.item:last-child {
  234. border-radius: 0 0 .1875em;
  235. }
  236. .ui.vertical.menu>.active.item:only-child {
  237. border-radius: 0 .1875em .1875em 0;
  238. }
  239. .ui.vertical.menu .active.item .menu .active.item {
  240. border-left: 0;
  241. }
  242. .ui.vertical.menu .active.item .menu .active.item {
  243. padding-left: 1.5rem;
  244. }
  245. .ui.vertical.menu .item .menu .active.item {
  246. background-color: rgba(0,0,0,.03);
  247. box-shadow: none;
  248. }
  249. .ui.menu .item.disabled,
  250. .ui.menu .item.disabled:hover,
  251. .ui.menu .item.disabled.hover {
  252. cursor: default;
  253. color: rgba(0,0,0,.2);
  254. background-color: transparent!important;
  255. }
  256. .ui.menu.loading {
  257. position: relative;
  258. }
  259. .ui.menu.loading:after {
  260. position: absolute;
  261. top: 0;
  262. left: 0;
  263. content: '';
  264. width: 100%;
  265. height: 100%;
  266. background: rgba(255,255,255,.8) url(../images/loader-large.gif) no-repeat 50% 50%;
  267. visibility: visible;
  268. }
  269. .ui.vertical.menu .item {
  270. display: block;
  271. height: auto!important;
  272. border-top: 0;
  273. border-left: 0 solid rgba(0,0,0,0);
  274. border-right: 0;
  275. }
  276. .ui.vertical.menu>.item:first-child {
  277. border-radius: .1875em .1875em 0 0;
  278. }
  279. .ui.vertical.menu>.item:last-child {
  280. border-radius: 0 0 .1875em .1875em;
  281. }
  282. .ui.vertical.menu .item>.label {
  283. float: right;
  284. text-align: center;
  285. }
  286. .ui.vertical.menu .item>.icon:not(.input) {
  287. float: right;
  288. width: 1.22em;
  289. margin: 0 0 0 .5em;
  290. }
  291. .ui.vertical.menu .item>.label+.icon {
  292. float: none;
  293. margin: 0 .25em 0 0;
  294. }
  295. .ui.vertical.menu .item:before {
  296. position: absolute;
  297. content: '';
  298. top: 0;
  299. left: 0;
  300. width: 100%;
  301. height: 1px;
  302. background-image: -webkit-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);
  303. background-image: -webkit-linear-gradient(left, rgba(0,0,0,.03) 0, rgba(0,0,0,.1) 1.5em, rgba(0,0,0,.03) 100%);
  304. background-image: linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);
  305. }
  306. .ui.vertical.menu .item:first-child:before {
  307. background-image: none!important;
  308. }
  309. .ui.vertical.menu .dropdown.item>i {
  310. float: right;
  311. content: "\f0da";
  312. }
  313. .ui.vertical.menu .dropdown.item .menu {
  314. top: 0!important;
  315. left: 100%;
  316. margin: 0 0 0 1px;
  317. box-shadow: 0 0 1px 1px #DDD;
  318. }
  319. .ui.vertical.menu .dropdown.item.active {
  320. border-top-right-radius: 0;
  321. border-bottom-right-radius: 0;
  322. }
  323. .ui.vertical.menu .dropdown.item .menu .item {
  324. font-size: 1rem;
  325. }
  326. .ui.vertical.menu .dropdown.item .menu .item .icon {
  327. margin-right: 0;
  328. }
  329. .ui.vertical.menu .dropdown.item.active {
  330. box-shadow: none;
  331. }
  332. .ui.vertical.menu .item>.menu {
  333. margin: .5em -.95em 0;
  334. }
  335. .ui.vertical.menu .item>.menu>.item {
  336. padding: .5rem 1.5rem;
  337. font-size: .875em;
  338. }
  339. .ui.vertical.menu .item>.menu>.item:before {
  340. display: none;
  341. }
  342. .ui.tiered.menu>.sub.menu>.item {
  343. color: rgba(0,0,0,.4);
  344. }
  345. .ui.tiered.menu>.menu>.item:hover,
  346. .ui.tiered.menu>.menu>.item.hover {
  347. color: rgba(0,0,0,.8);
  348. }
  349. .ui.tiered.menu .item.active {
  350. color: rgba(0,0,0,.8);
  351. }
  352. .ui.tiered.menu>.menu .item.active:after {
  353. position: absolute;
  354. content: '';
  355. margin-top: -1px;
  356. top: 100%;
  357. left: 0;
  358. width: 100%;
  359. height: 2px;
  360. background-color: #FBFBFB;
  361. }
  362. .ui.tiered.menu .sub.menu {
  363. background-color: rgba(0,0,0,.01);
  364. border-radius: 0;
  365. border-top: 1px solid rgba(0,0,0,.1);
  366. box-shadow: none;
  367. color: #FFF;
  368. }
  369. .ui.tiered.menu .sub.menu .item {
  370. font-size: .875rem;
  371. }
  372. .ui.tiered.menu .sub.menu .item:before {
  373. background-image: none;
  374. }
  375. .ui.tiered.menu .sub.menu .active.item {
  376. padding-top: .83em;
  377. background-color: transparent;
  378. border-radius: 0;
  379. border-top: medium none;
  380. box-shadow: none;
  381. color: rgba(0,0,0,.7)!important;
  382. }
  383. .ui.tiered.menu .sub.menu .active.item:after {
  384. display: none;
  385. }
  386. .ui.inverted.tiered.menu>.menu>.item {
  387. color: rgba(255,255,255,.5);
  388. }
  389. .ui.inverted.tiered.menu .sub.menu {
  390. background-color: rgba(0,0,0,.2);
  391. }
  392. .ui.inverted.tiered.menu .sub.menu .item {
  393. color: rgba(255,255,255,.6);
  394. }
  395. .ui.inverted.tiered.menu>.menu>.item:hover,
  396. .ui.inverted.tiered.menu>.menu>.item.hover {
  397. color: rgba(255,255,255,.9);
  398. }
  399. .ui.inverted.tiered.menu .active.item:after {
  400. display: none;
  401. }
  402. .ui.inverted.tiered.menu>.sub.menu>.active.item,
  403. .ui.inverted.tiered.menu>.menu>.active.item {
  404. color: #fff!important;
  405. box-shadow: none;
  406. }
  407. .ui.pointing.tiered.menu>.menu>.item:after {
  408. display: none;
  409. }
  410. .ui.pointing.tiered.menu>.sub.menu>.item:after {
  411. display: block;
  412. }
  413. .ui.tabular.menu {
  414. background-color: transparent;
  415. border-bottom: 1px solid #DCDDDE;
  416. border-radius: 0;
  417. box-shadow: none!important;
  418. }
  419. .ui.tabular.menu .item {
  420. background-color: transparent;
  421. border-left: 1px solid transparent;
  422. border-right: 1px solid transparent;
  423. border-top: 1px solid transparent;
  424. padding-left: 1.4em;
  425. padding-right: 1.4em;
  426. color: rgba(0,0,0,.6);
  427. }
  428. .ui.tabular.menu .item:before {
  429. display: none;
  430. }
  431. .ui.tabular.menu .item:hover {
  432. background-color: transparent;
  433. color: rgba(0,0,0,.8);
  434. }
  435. .ui.tabular.menu .active.item {
  436. position: relative;
  437. background-color: #FFF;
  438. color: rgba(0,0,0,.8);
  439. border-color: #DCDDDE;
  440. font-weight: 700;
  441. margin-bottom: -1px;
  442. border-bottom: 1px solid #FFF;
  443. box-shadow: none;
  444. border-radius: 5px 5px 0 0;
  445. }
  446. .ui.attached.tabular.menu {
  447. position: relative;
  448. z-index: 2;
  449. }
  450. .ui.tabular.menu~.bottom.attached.segment {
  451. margin: 1px 0 0 1px;
  452. }
  453. .ui.pagination.menu {
  454. margin: 0;
  455. display: inline-block;
  456. vertical-align: middle;
  457. }
  458. .ui.pagination.menu .item {
  459. min-width: 3em;
  460. text-align: center;
  461. }
  462. .ui.pagination.menu .icon.item .icon {
  463. vertical-align: top;
  464. }
  465. .ui.pagination.menu.floated {
  466. display: block;
  467. }
  468. .ui.pagination.menu .active.item {
  469. border-top: 0;
  470. padding-top: .83em;
  471. background-color: rgba(0,0,0,.05);
  472. box-shadow: none;
  473. }
  474. .ui.secondary.menu {
  475. background-color: transparent;
  476. border-radius: 0;
  477. box-shadow: none;
  478. }
  479. .ui.secondary.menu>.menu>.item,
  480. .ui.secondary.menu>.item {
  481. box-shadow: none;
  482. border: 0;
  483. height: auto!important;
  484. margin: 0 .25em;
  485. padding: .5em 1em;
  486. border-radius: .3125em;
  487. }
  488. .ui.secondary.menu>.menu>.item:before,
  489. .ui.secondary.menu>.item:before {
  490. display: none!important;
  491. }
  492. .ui.secondary.menu .item>.input input {
  493. background-color: transparent;
  494. border: 0;
  495. }
  496. .ui.secondary.menu .link.item,
  497. .ui.secondary.menu a.item {
  498. opacity: .8;
  499. -webkit-transition: none;
  500. transition: none;
  501. }
  502. .ui.secondary.menu .header.item {
  503. border-right: .1em solid rgba(0,0,0,.1);
  504. background-color: transparent;
  505. border-radius: 0;
  506. }
  507. .ui.secondary.menu .link.item:hover,
  508. .ui.secondary.menu a.item:hover {
  509. opacity: 1;
  510. }
  511. .ui.secondary.menu>.menu>.active.item,
  512. .ui.secondary.menu>.active.item {
  513. background-color: rgba(0,0,0,.08);
  514. opacity: 1;
  515. box-shadow: none;
  516. }
  517. .ui.secondary.vertical.menu>.active.item {
  518. border-radius: .3125em;
  519. }
  520. .ui.secondary.inverted.menu .link.item,
  521. .ui.secondary.inverted.menu a.item {
  522. color: rgba(255,255,255,.5);
  523. }
  524. .ui.secondary.inverted.menu .link.item:hover,
  525. .ui.secondary.inverted.menu a.item:hover {
  526. color: rgba(255,255,255,.9);
  527. }
  528. .ui.secondary.inverted.menu>.active.item {
  529. background-color: rgba(255,255,255,.9);
  530. }
  531. .ui.secondary.item.menu>.item {
  532. margin: 0;
  533. }
  534. .ui.secondary.attached.menu {
  535. box-shadow: none;
  536. }
  537. .ui.secondary.pointing.menu {
  538. border-bottom: 3px solid rgba(0,0,0,.1);
  539. }
  540. .ui.secondary.pointing.menu>.menu>.item,
  541. .ui.secondary.pointing.menu>.item {
  542. margin: 0 0 -3px;
  543. padding: .6em .95em;
  544. border-bottom: 3px solid rgba(0,0,0,0);
  545. border-radius: 0;
  546. -webkit-transition: color .2s;
  547. transition: color .2s;
  548. }
  549. .ui.secondary.pointing.menu .header.item {
  550. border-right-width: 0;
  551. font-weight: 700;
  552. }
  553. .ui.secondary.pointing.menu .text.item {
  554. box-shadow: none!important;
  555. }
  556. .ui.secondary.pointing.menu>.menu>.item:after,
  557. .ui.secondary.pointing.menu>.item:after {
  558. display: none;
  559. }
  560. .ui.secondary.pointing.menu>.menu>.link.item:hover,
  561. .ui.secondary.pointing.menu>.link.item:hover,
  562. .ui.secondary.pointing.menu>.menu>a.item:hover,
  563. .ui.secondary.pointing.menu>a.item:hover {
  564. background-color: transparent;
  565. color: rgba(0,0,0,.7);
  566. }
  567. .ui.secondary.pointing.menu>.menu>.link.item:active,
  568. .ui.secondary.pointing.menu>.link.item:active,
  569. .ui.secondary.pointing.menu>.menu>a.item:active,
  570. .ui.secondary.pointing.menu>a.item:active {
  571. background-color: transparent;
  572. border-color: rgba(0,0,0,.2);
  573. }
  574. .ui.secondary.pointing.menu>.menu>.item.active,
  575. .ui.secondary.pointing.menu>.item.active {
  576. background-color: transparent;
  577. border-color: rgba(0,0,0,.4);
  578. box-shadow: none;
  579. }
  580. .ui.secondary.vertical.pointing.menu {
  581. border: 0;
  582. border-right: 3px solid rgba(0,0,0,.1);
  583. }
  584. .ui.secondary.vertical.menu>.item {
  585. border: 0;
  586. margin: 0 0 .3em;
  587. padding: .6em .8em;
  588. border-radius: .1875em;
  589. }
  590. .ui.secondary.vertical.menu>.header.item {
  591. border-radius: 0;
  592. }
  593. .ui.secondary.vertical.pointing.menu>.item {
  594. margin: 0 -3px 0 0;
  595. border-bottom: 0;
  596. border-right: 3px solid transparent;
  597. border-radius: 0;
  598. }
  599. .ui.secondary.vertical.pointing.menu>.item.hover,
  600. .ui.secondary.vertical.pointing.menu>.item:hover {
  601. background-color: transparent;
  602. color: rgba(0,0,0,.7);
  603. }
  604. .ui.secondary.vertical.pointing.menu>.item:active {
  605. background-color: transparent;
  606. border-color: rgba(0,0,0,.2);
  607. }
  608. .ui.secondary.vertical.pointing.menu>.item.active {
  609. background-color: transparent;
  610. border-color: rgba(0,0,0,.4);
  611. color: rgba(0,0,0,.85);
  612. }
  613. .ui.secondary.inverted.menu {
  614. background-color: transparent;
  615. }
  616. .ui.secondary.inverted.pointing.menu {
  617. border-bottom: 3px solid rgba(255,255,255,.1);
  618. }
  619. .ui.secondary.inverted.pointing.menu>.item {
  620. color: rgba(255,255,255,.7);
  621. }
  622. .ui.secondary.inverted.pointing.menu>.item.hover,
  623. .ui.secondary.inverted.pointing.menu>.item:hover {
  624. color: rgba(255,255,255,.85);
  625. }
  626. .ui.secondary.inverted.pointing.menu>.item:active {
  627. border-color: rgba(255,255,255,.4)!important;
  628. }
  629. .ui.secondary.inverted.pointing.menu>.item.active {
  630. border-color: rgba(255,255,255,.8)!important;
  631. color: #fff;
  632. }
  633. .ui.secondary.inverted.vertical.pointing.menu {
  634. border-right: 3px solid rgba(255,255,255,.1);
  635. border-bottom: 0;
  636. }
  637. .ui.text.menu {
  638. background-color: transparent;
  639. margin: 1rem -1rem;
  640. border-radius: 0;
  641. box-shadow: none;
  642. }
  643. .ui.text.menu>.item {
  644. opacity: .8;
  645. margin: 0 1em;
  646. padding: 0;
  647. height: auto!important;
  648. border-radius: 0;
  649. box-shadow: none;
  650. -webkit-transition: opacity .2s ease;
  651. transition: opacity .2s ease;
  652. }
  653. .ui.text.menu>.item:before {
  654. display: none!important;
  655. }
  656. .ui.text.menu .header.item {
  657. background-color: transparent;
  658. opacity: 1;
  659. color: rgba(50,50,50,.8);
  660. font-size: .875rem;
  661. padding: 0;
  662. text-transform: uppercase;
  663. font-weight: 700;
  664. }
  665. .ui.text.item.menu .item {
  666. margin: 0;
  667. }
  668. .ui.vertical.text.menu {
  669. margin: 1rem 0;
  670. }
  671. .ui.vertical.text.menu:first-child {
  672. margin-top: 0rem;
  673. }
  674. .ui.vertical.text.menu:last-child {
  675. margin-bottom: 0rem;
  676. }
  677. .ui.vertical.text.menu .item {
  678. float: left;
  679. clear: left;
  680. margin: .5em 0;
  681. }
  682. .ui.vertical.text.menu .item>.icon {
  683. float: none;
  684. margin: 0 .83em 0 0;
  685. }
  686. .ui.vertical.text.menu .header.item {
  687. margin: .8em 0;
  688. }
  689. .ui.text.menu .item.hover,
  690. .ui.text.menu .item:hover {
  691. opacity: 1;
  692. background-color: transparent;
  693. }
  694. .ui.text.menu .active.item {
  695. background-color: transparent;
  696. padding: 0;
  697. border: 0;
  698. opacity: 1;
  699. font-weight: 700;
  700. box-shadow: none;
  701. }
  702. .ui.text.pointing.menu .active.item:after {
  703. box-shadow: none;
  704. }
  705. .ui.text.attached.menu {
  706. box-shadow: none;
  707. }
  708. .ui.inverted.text.menu,
  709. .ui.inverted.text.menu .item,
  710. .ui.inverted.text.menu .item:hover,
  711. .ui.inverted.text.menu .item.active {
  712. background-color: transparent;
  713. }
  714. .ui.icon.menu,
  715. .ui.vertical.icon.menu {
  716. width: auto;
  717. display: inline-block;
  718. height: auto;
  719. }
  720. .ui.icon.menu>.item {
  721. height: auto;
  722. text-align: center;
  723. color: rgba(60,60,60,.7);
  724. }
  725. .ui.icon.menu>.item>.icon {
  726. display: block;
  727. float: none!important;
  728. opacity: 1;
  729. margin: 0 auto!important;
  730. }
  731. .ui.icon.menu .icon:before {
  732. opacity: 1;
  733. }
  734. .ui.menu .icon.item .icon {
  735. margin: 0;
  736. }
  737. .ui.vertical.icon.menu {
  738. float: none;
  739. }
  740. .ui.inverted.icon.menu .item {
  741. color: rgba(255,255,255,.8);
  742. }
  743. .ui.inverted.icon.menu .icon {
  744. color: #fff;
  745. }
  746. .ui.labeled.icon.menu {
  747. text-align: center;
  748. }
  749. .ui.labeled.icon.menu>.item>.icon {
  750. display: block;
  751. font-size: 1.5em!important;
  752. margin: 0 auto .3em!important;
  753. }
  754. .ui.menu .green.active.item,
  755. .ui.green.menu .active.item {
  756. border-color: #A1CF64!important;
  757. color: #A1CF64!important;
  758. }
  759. .ui.menu .red.active.item,
  760. .ui.red.menu .active.item {
  761. border-color: #D95C5C!important;
  762. color: #D95C5C!important;
  763. }
  764. .ui.menu .blue.active.item,
  765. .ui.blue.menu .active.item {
  766. border-color: #6ECFF5!important;
  767. color: #6ECFF5!important;
  768. }
  769. .ui.menu .purple.active.item,
  770. .ui.purple.menu .active.item {
  771. border-color: #564F8A!important;
  772. color: #564F8A!important;
  773. }
  774. .ui.menu .orange.active.item,
  775. .ui.orange.menu .active.item {
  776. border-color: #F05940!important;
  777. color: #F05940!important;
  778. }
  779. .ui.menu .teal.active.item,
  780. .ui.teal.menu .active.item {
  781. border-color: #00B5AD!important;
  782. color: #00B5AD!important;
  783. }
  784. .ui.inverted.menu {
  785. background-color: #333;
  786. box-shadow: none;
  787. }
  788. .ui.inverted.menu .header.item {
  789. margin: 0;
  790. background-color: rgba(0,0,0,.3);
  791. box-shadow: none;
  792. }
  793. .ui.inverted.menu .item,
  794. .ui.inverted.menu .item>a {
  795. color: #FFF;
  796. }
  797. .ui.inverted.menu .item .item,
  798. .ui.inverted.menu .item .item>a {
  799. color: rgba(255,255,255,.8);
  800. }
  801. .ui.inverted.menu .dropdown.item .menu .item,
  802. .ui.inverted.menu .dropdown.item .menu .item a {
  803. color: rgba(0,0,0,.75)!important;
  804. }
  805. .ui.inverted.menu .item.disabled,
  806. .ui.inverted.menu .item.disabled:hover,
  807. .ui.inverted.menu .item.disabled.hover {
  808. color: rgba(255,255,255,.2);
  809. }
  810. .ui.inverted.menu .item:before {
  811. background-image: -webkit-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);
  812. background-image: -webkit-linear-gradient(top, rgba(255,255,255,.03) 0, rgba(255,255,255,.1) 50%, rgba(255,255,255,.03) 100%);
  813. background-image: linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);
  814. }
  815. .ui.vertical.inverted.menu .item:before {
  816. background-image: -webkit-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);
  817. background-image: -webkit-linear-gradient(left, rgba(255,255,255,.03) 0, rgba(255,255,255,.1) 50%, rgba(255,255,255,.03) 100%);
  818. background-image: linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);
  819. }
  820. .ui.link.inverted.menu .item:hover,
  821. .ui.inverted.menu .item.hover,
  822. .ui.inverted.menu .link.item:hover,
  823. .ui.inverted.menu a.item:hover,
  824. .ui.inverted.menu .dropdown.item.hover,
  825. .ui.inverted.menu .dropdown.item:hover {
  826. background-color: rgba(255,255,255,.1);
  827. }
  828. .ui.inverted.menu a.item:hover,
  829. .ui.inverted.menu .item.hover,
  830. .ui.inverted.menu .item>a:hover,
  831. .ui.inverted.menu .item .menu a.item:hover,
  832. .ui.inverted.menu .item .menu a.item.hover,
  833. .ui.inverted.menu .item .menu .link.item:hover,
  834. .ui.inverted.menu .item .menu .link.item.hover {
  835. color: #fff;
  836. }
  837. .ui.inverted.menu a.item:active,
  838. .ui.inverted.menu .dropdown.item:active,
  839. .ui.inverted.menu .link.item:active,
  840. .ui.inverted.menu a.item:active {
  841. background-color: rgba(255,255,255,.15);
  842. }
  843. .ui.inverted.menu .active.item {
  844. box-shadow: none!important;
  845. background-color: rgba(255,255,255,.2);
  846. }
  847. .ui.inverted.menu .active.item,
  848. .ui.inverted.menu .active.item a {
  849. color: #fff!important;
  850. }
  851. .ui.inverted.vertical.menu .item .menu .active.item {
  852. background-color: rgba(255,255,255,.2);
  853. color: #fff;
  854. }
  855. .ui.inverted.pointing.menu .active.item:after {
  856. background-color: #505050;
  857. box-shadow: none;
  858. }
  859. .ui.inverted.pointing.menu .active.item:hover:after {
  860. background-color: #3B3B3B;
  861. }
  862. .ui.selection.menu>.item {
  863. color: rgba(0,0,0,.4);
  864. }
  865. .ui.selection.menu>.item:hover {
  866. color: rgba(0,0,0,.6);
  867. }
  868. .ui.selection.menu>.item.active {
  869. color: rgba(0,0,0,.85);
  870. }
  871. .ui.inverted.selection.menu>.item {
  872. color: rgba(255,255,255,.4);
  873. }
  874. .ui.inverted.selection.menu>.item:hover {
  875. color: rgba(255,255,255,.9);
  876. }
  877. .ui.inverted.selection.menu>.item.active {
  878. color: #FFF;
  879. }
  880. .ui.floated.menu {
  881. float: left;
  882. margin: 0rem .5rem 0rem 0rem;
  883. }
  884. .ui.right.floated.menu {
  885. float: right;
  886. margin: 0rem 0rem 0rem .5rem;
  887. }
  888. .ui.grey.menu {
  889. background-color: #F0F0F0;
  890. }
  891. .ui.inverted.green.menu {
  892. background-color: #A1CF64;
  893. }
  894. .ui.inverted.green.pointing.menu .active.item:after {
  895. background-color: #A1CF64;
  896. }
  897. .ui.inverted.red.menu {
  898. background-color: #D95C5C;
  899. }
  900. .ui.inverted.red.pointing.menu .active.item:after {
  901. background-color: #F16883;
  902. }
  903. .ui.inverted.blue.menu {
  904. background-color: #6ECFF5;
  905. }
  906. .ui.inverted.blue.pointing.menu .active.item:after {
  907. background-color: #6ECFF5;
  908. }
  909. .ui.inverted.purple.menu {
  910. background-color: #564F8A;
  911. }
  912. .ui.inverted.purple.pointing.menu .active.item:after {
  913. background-color: #564F8A;
  914. }
  915. .ui.inverted.orange.menu {
  916. background-color: #F05940;
  917. }
  918. .ui.inverted.orange.pointing.menu .active.item:after {
  919. background-color: #F05940;
  920. }
  921. .ui.inverted.teal.menu {
  922. background-color: #00B5AD;
  923. }
  924. .ui.inverted.teal.pointing.menu .active.item:after {
  925. background-color: #00B5AD;
  926. }
  927. .ui.fitted.menu .item,
  928. .ui.fitted.menu .item .menu .item,
  929. .ui.menu .fitted.item {
  930. padding: 0;
  931. }
  932. .ui.horizontally.fitted.menu .item,
  933. .ui.horizontally.fitted.menu .item .menu .item,
  934. .ui.menu .horizontally.fitted.item {
  935. padding-top: .83em;
  936. padding-bottom: .83em;
  937. }
  938. .ui.vertically.fitted.menu .item,
  939. .ui.vertically.fitted.menu .item .menu .item,
  940. .ui.menu .vertically.fitted.item {
  941. padding-left: .95em;
  942. padding-right: .95em;
  943. }
  944. .ui.borderless.menu .item:before,
  945. .ui.borderless.menu .item .menu .item:before,
  946. .ui.menu .borderless.item:before {
  947. background-image: none;
  948. }
  949. .ui.compact.menu {
  950. display: inline-block;
  951. margin: 0;
  952. vertical-align: middle;
  953. }
  954. .ui.compact.vertical.menu {
  955. width: auto!important;
  956. }
  957. .ui.compact.vertical.menu .item:last-child::before {
  958. display: block;
  959. }
  960. .ui.menu.fluid,
  961. .ui.vertical.menu.fluid {
  962. display: block;
  963. width: 100%!important;
  964. }
  965. .ui.item.menu,
  966. .ui.item.menu .item {
  967. width: 100%;
  968. padding-left: 0!important;
  969. padding-right: 0!important;
  970. text-align: center;
  971. }
  972. .ui.menu.two.item .item {
  973. width: 50%;
  974. }
  975. .ui.menu.three.item .item {
  976. width: 33.333%;
  977. }
  978. .ui.menu.four.item .item {
  979. width: 25%;
  980. }
  981. .ui.menu.five.item .item {
  982. width: 20%;
  983. }
  984. .ui.menu.six.item .item {
  985. width: 16.666%;
  986. }
  987. .ui.menu.seven.item .item {
  988. width: 14.285%;
  989. }
  990. .ui.menu.eight.item .item {
  991. width: 12.5%;
  992. }
  993. .ui.menu.nine.item .item {
  994. width: 11.11%;
  995. }
  996. .ui.menu.ten.item .item {
  997. width: 10%;
  998. }
  999. .ui.menu.eleven.item .item {
  1000. width: 9.09%;
  1001. }
  1002. .ui.menu.twelve.item .item {
  1003. width: 8.333%;
  1004. }
  1005. .ui.menu.fixed {
  1006. position: fixed;
  1007. z-index: 10;
  1008. margin: 0;
  1009. border: 0;
  1010. width: 100%;
  1011. }
  1012. .ui.menu.fixed,
  1013. .ui.menu.fixed .item:first-child,
  1014. .ui.menu.fixed .item:last-child {
  1015. border-radius: 0!important;
  1016. }
  1017. .ui.menu.fixed.top {
  1018. top: 0;
  1019. left: 0;
  1020. right: auto;
  1021. bottom: auto;
  1022. }
  1023. .ui.menu.fixed.right {
  1024. top: 0;
  1025. right: 0;
  1026. left: auto;
  1027. bottom: auto;
  1028. width: auto;
  1029. height: 100%;
  1030. }
  1031. .ui.menu.fixed.bottom {
  1032. bottom: 0;
  1033. left: 0;
  1034. top: auto;
  1035. right: auto;
  1036. }
  1037. .ui.menu.fixed.left {
  1038. top: 0;
  1039. left: 0;
  1040. right: auto;
  1041. bottom: auto;
  1042. width: auto;
  1043. height: 100%;
  1044. }
  1045. .ui.pointing.menu .active.item:after {
  1046. position: absolute;
  1047. bottom: -.35em;
  1048. left: 50%;
  1049. content: "";
  1050. margin-left: -.3em;
  1051. width: .6em;
  1052. height: .6em;
  1053. border: 0;
  1054. border-bottom: 1px solid rgba(0,0,0,.1);
  1055. border-right: 1px solid rgba(0,0,0,.1);
  1056. background-image: none;
  1057. -webkit-transform: rotate(45deg);
  1058. -ms-transform: rotate(45deg);
  1059. transform: rotate(45deg);
  1060. z-index: 2;
  1061. -webkit-transition: background .2s ease;
  1062. transition: background .2s ease;
  1063. }
  1064. .ui.pointing.menu .active.item .menu .active.item:after {
  1065. display: none;
  1066. }
  1067. .ui.vertical.pointing.menu .active.item:after {
  1068. position: absolute;
  1069. top: 50%;
  1070. margin-top: -.3em;
  1071. right: -.4em;
  1072. bottom: auto;
  1073. left: auto;
  1074. border: 0;
  1075. border-top: 1px solid rgba(0,0,0,.1);
  1076. border-right: 1px solid rgba(0,0,0,.1);
  1077. }
  1078. .ui.pointing.menu .active.item:after {
  1079. background-color: #FCFCFC;
  1080. }
  1081. .ui.pointing.menu .active.item.hover:after,
  1082. .ui.pointing.menu .active.item:hover:after {
  1083. background-color: #FAFAFA;
  1084. }
  1085. .ui.vertical.pointing.menu .menu .active.item:after {
  1086. background-color: #F4F4F4;
  1087. }
  1088. .ui.pointing.menu a.active.item:active:after {
  1089. background-color: #F0F0F0;
  1090. }
  1091. .ui.menu.attached {
  1092. margin: 0rem;
  1093. border-radius: 0;
  1094. box-shadow: 0 0 0 1px #DDD;
  1095. }
  1096. .ui.top.attached.menu {
  1097. border-radius: .1875em .1875em 0 0;
  1098. }
  1099. .ui.menu.bottom.attached {
  1100. border-radius: 0 0 .1875em .1875em;
  1101. }
  1102. .ui.small.menu .item {
  1103. font-size: .875rem;
  1104. }
  1105. .ui.small.menu:not(.vertical) .item>.input input {
  1106. padding-top: .4em;
  1107. padding-bottom: .4em;
  1108. }
  1109. .ui.small.vertical.menu {
  1110. width: 13rem;
  1111. }
  1112. .ui.menu .item {
  1113. font-size: 1rem;
  1114. }
  1115. .ui.vertical.menu {
  1116. width: 15rem;
  1117. }
  1118. .ui.large.menu .item {
  1119. font-size: 1.125rem;
  1120. }
  1121. .ui.large.menu .item .item {
  1122. font-size: .875rem;
  1123. }
  1124. .ui.large.menu:not(.vertical) .item>.input input {
  1125. top: -.125em;
  1126. padding-bottom: .6em;
  1127. padding-top: .6em;
  1128. }
  1129. .ui.large.menu .dropdown.item .item {
  1130. font-size: 1rem;
  1131. }
  1132. .ui.large.vertical.menu {
  1133. width: 18rem;
  1134. }