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.

1418 lines
28 KiB

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