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.

2025 lines
41 KiB

9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Menu
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. /*--------------
  15. Menu
  16. ---------------*/
  17. .ui.menu {
  18. display: -webkit-box;
  19. display: -webkit-flex;
  20. display: -ms-flexbox;
  21. display: flex;
  22. margin: 1rem 0em;
  23. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  24. background: #FFFFFF;
  25. font-weight: normal;
  26. border: 1px solid rgba(34, 36, 38, 0.15);
  27. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  28. border-radius: 0.28571429rem;
  29. min-height: 2.85714286em;
  30. }
  31. .ui.menu:after {
  32. content: '';
  33. display: block;
  34. height: 0px;
  35. clear: both;
  36. visibility: hidden;
  37. }
  38. .ui.menu:first-child {
  39. margin-top: 0rem;
  40. }
  41. .ui.menu:last-child {
  42. margin-bottom: 0rem;
  43. }
  44. /*--------------
  45. Sub-Menu
  46. ---------------*/
  47. .ui.menu .menu {
  48. margin: 0em;
  49. }
  50. .ui.menu:not(.vertical) > .menu {
  51. display: -webkit-box;
  52. display: -webkit-flex;
  53. display: -ms-flexbox;
  54. display: flex;
  55. }
  56. /*--------------
  57. Item
  58. ---------------*/
  59. .ui.menu:not(.vertical) .item {
  60. display: -webkit-box;
  61. display: -webkit-flex;
  62. display: -ms-flexbox;
  63. display: flex;
  64. -webkit-box-align: center;
  65. -webkit-align-items: center;
  66. -ms-flex-align: center;
  67. align-items: center;
  68. }
  69. .ui.menu .item {
  70. position: relative;
  71. vertical-align: middle;
  72. line-height: 1;
  73. text-decoration: none;
  74. -webkit-tap-highlight-color: transparent;
  75. -webkit-box-flex: 0;
  76. -webkit-flex: 0 0 auto;
  77. -ms-flex: 0 0 auto;
  78. flex: 0 0 auto;
  79. -webkit-user-select: none;
  80. -moz-user-select: none;
  81. -ms-user-select: none;
  82. user-select: none;
  83. background: none;
  84. padding: 0.92857143em 1.14285714em;
  85. text-transform: none;
  86. color: rgba(0, 0, 0, 0.87);
  87. font-weight: normal;
  88. -webkit-transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  89. transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  90. }
  91. .ui.menu > .item:first-child {
  92. border-radius: 0.28571429rem 0px 0px 0.28571429rem;
  93. }
  94. /* Border */
  95. .ui.menu .item:before {
  96. position: absolute;
  97. content: '';
  98. top: 0%;
  99. right: 0px;
  100. height: 100%;
  101. width: 1px;
  102. background: rgba(34, 36, 38, 0.1);
  103. }
  104. /*--------------
  105. Text Content
  106. ---------------*/
  107. .ui.menu .text.item > *,
  108. .ui.menu .item > a:not(.ui),
  109. .ui.menu .item > p:only-child {
  110. -webkit-user-select: text;
  111. -moz-user-select: text;
  112. -ms-user-select: text;
  113. user-select: text;
  114. line-height: 1.3;
  115. }
  116. .ui.menu .item > p:first-child {
  117. margin-top: 0;
  118. }
  119. .ui.menu .item > p:last-child {
  120. margin-bottom: 0;
  121. }
  122. /*--------------
  123. Icons
  124. ---------------*/
  125. .ui.menu .item > i.icon {
  126. opacity: 0.9;
  127. float: none;
  128. margin: 0em 0.35714286em 0em 0em;
  129. }
  130. /*--------------
  131. Button
  132. ---------------*/
  133. .ui.menu:not(.vertical) .item > .button {
  134. position: relative;
  135. top: 0em;
  136. margin: -0.5em 0em;
  137. padding-bottom: 0.78571429em;
  138. padding-top: 0.78571429em;
  139. font-size: 1em;
  140. }
  141. /*----------------
  142. Grid / Container
  143. -----------------*/
  144. .ui.menu > .grid,
  145. .ui.menu > .container {
  146. display: -webkit-box;
  147. display: -webkit-flex;
  148. display: -ms-flexbox;
  149. display: flex;
  150. -webkit-box-align: inherit;
  151. -webkit-align-items: inherit;
  152. -ms-flex-align: inherit;
  153. align-items: inherit;
  154. -webkit-box-orient: vertical;
  155. -webkit-box-direction: normal;
  156. -webkit-flex-direction: inherit;
  157. -ms-flex-direction: inherit;
  158. flex-direction: inherit;
  159. }
  160. /*--------------
  161. Inputs
  162. ---------------*/
  163. .ui.menu .item > .input {
  164. width: 100%;
  165. }
  166. .ui.menu:not(.vertical) .item > .input {
  167. position: relative;
  168. top: 0em;
  169. margin: -0.5em 0em;
  170. }
  171. .ui.menu .item > .input input {
  172. font-size: 1em;
  173. padding-top: 0.57142857em;
  174. padding-bottom: 0.57142857em;
  175. }
  176. /*--------------
  177. Header
  178. ---------------*/
  179. .ui.menu .header.item,
  180. .ui.vertical.menu .header.item {
  181. margin: 0em;
  182. background: '';
  183. text-transform: normal;
  184. font-weight: bold;
  185. }
  186. .ui.vertical.menu .item > .header:not(.ui) {
  187. margin: 0em 0em 0.5em;
  188. font-size: 1em;
  189. font-weight: bold;
  190. }
  191. /*--------------
  192. Popup
  193. ---------------*/
  194. .ui.menu .ui.popup {
  195. display: none;
  196. }
  197. .ui.menu .ui.visible.popup {
  198. display: block;
  199. }
  200. /*--------------
  201. Dropdowns
  202. ---------------*/
  203. /* Dropdown Icon */
  204. .ui.menu .item > i.dropdown.icon {
  205. padding: 0em;
  206. float: right;
  207. margin: 0em 0em 0em 1em;
  208. }
  209. /* Menu */
  210. .ui.menu .dropdown.item .menu {
  211. left: 0px;
  212. min-width: calc(100% - 1px);
  213. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  214. background: #FFFFFF;
  215. margin: 0em 0px 0px;
  216. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  217. -webkit-box-orient: vertical !important;
  218. -webkit-box-direction: normal !important;
  219. -webkit-flex-direction: column !important;
  220. -ms-flex-direction: column !important;
  221. flex-direction: column !important;
  222. }
  223. /* Menu Items */
  224. .ui.menu .ui.dropdown .menu > .item {
  225. margin: 0;
  226. text-align: left;
  227. font-size: 1em !important;
  228. padding: 0.78571429em 1.14285714em !important;
  229. background: transparent !important;
  230. color: rgba(0, 0, 0, 0.87) !important;
  231. text-transform: none !important;
  232. font-weight: normal !important;
  233. box-shadow: none !important;
  234. -webkit-transition: none !important;
  235. transition: none !important;
  236. }
  237. .ui.menu .ui.dropdown .menu > .item:hover {
  238. background: rgba(0, 0, 0, 0.05) !important;
  239. color: rgba(0, 0, 0, 0.95) !important;
  240. }
  241. .ui.menu .ui.dropdown .menu > .selected.item {
  242. background: rgba(0, 0, 0, 0.05) !important;
  243. color: rgba(0, 0, 0, 0.95) !important;
  244. }
  245. .ui.menu .ui.dropdown .menu > .active.item {
  246. background: rgba(0, 0, 0, 0.03) !important;
  247. font-weight: bold !important;
  248. color: rgba(0, 0, 0, 0.95) !important;
  249. }
  250. .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
  251. display: block;
  252. }
  253. .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
  254. display: inline-block;
  255. font-size: 1em !important;
  256. float: none;
  257. margin: 0em 0.75em 0em 0em;
  258. }
  259. /* Secondary */
  260. .ui.secondary.menu .dropdown.item > .menu,
  261. .ui.text.menu .dropdown.item > .menu {
  262. border-radius: 0.28571429rem;
  263. margin-top: 0.35714286em;
  264. }
  265. /* Pointing */
  266. .ui.menu .pointing.dropdown.item .menu {
  267. margin-top: 0.75em;
  268. }
  269. /* Inverted */
  270. .ui.inverted.menu .search.dropdown.item > .search,
  271. .ui.inverted.menu .search.dropdown.item > .text {
  272. color: rgba(255, 255, 255, 0.9);
  273. }
  274. /* Vertical */
  275. .ui.vertical.menu .dropdown.item > .icon {
  276. float: right;
  277. content: "\f0da";
  278. margin-left: 1em;
  279. }
  280. .ui.vertical.menu .dropdown.item .menu {
  281. top: 0% !important;
  282. left: 100%;
  283. min-width: 0;
  284. margin: 0em 0em 0em 0em;
  285. box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
  286. border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem;
  287. }
  288. .ui.vertical.menu .active.dropdown.item {
  289. border-top-right-radius: 0em;
  290. border-bottom-right-radius: 0em;
  291. }
  292. .ui.vertical.menu .dropdown.active.item {
  293. box-shadow: none;
  294. }
  295. /* Evenly Divided */
  296. .ui.item.menu .dropdown .menu .item {
  297. width: 100%;
  298. }
  299. /*--------------
  300. Labels
  301. ---------------*/
  302. .ui.menu .item > .label {
  303. background: #999999;
  304. color: #FFFFFF;
  305. margin-left: 1em;
  306. padding: 0.3em 0.78571429em;
  307. }
  308. .ui.vertical.menu .item > .label {
  309. background: #999999;
  310. color: #FFFFFF;
  311. margin-top: -0.15em;
  312. margin-bottom: -0.15em;
  313. padding: 0.3em 0.78571429em;
  314. }
  315. .ui.menu .item > .floating.label {
  316. padding: 0.3em 0.78571429em;
  317. }
  318. /*--------------
  319. Images
  320. ---------------*/
  321. .ui.menu .item > img:not(.ui) {
  322. display: inline-block;
  323. vertical-align: middle;
  324. margin: -0.3em 0em;
  325. width: 2.5em;
  326. }
  327. .ui.vertical.menu .item > img:not(.ui):only-child {
  328. display: block;
  329. max-width: 100%;
  330. width: auto;
  331. }
  332. /*******************************
  333. Coupling
  334. *******************************/
  335. /*--------------
  336. Sidebar
  337. ---------------*/
  338. /* Show vertical dividers below last */
  339. .ui.vertical.sidebar.menu > .item:first-child:before {
  340. display: block !important;
  341. }
  342. .ui.vertical.sidebar.menu > .item::before {
  343. top: auto;
  344. bottom: 0px;
  345. }
  346. /*--------------
  347. Container
  348. ---------------*/
  349. @media only screen and (max-width: 767px) {
  350. .ui.menu > .ui.container {
  351. width: 100% !important;
  352. margin-left: 0em !important;
  353. margin-right: 0em !important;
  354. }
  355. }
  356. @media only screen and (min-width: 768px) {
  357. .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
  358. border-left: 1px solid rgba(34, 36, 38, 0.1);
  359. }
  360. }
  361. /*******************************
  362. States
  363. *******************************/
  364. /*--------------
  365. Hover
  366. ---------------*/
  367. .ui.link.menu .item:hover,
  368. .ui.menu .dropdown.item:hover,
  369. .ui.menu .link.item:hover,
  370. .ui.menu a.item:hover {
  371. cursor: pointer;
  372. background: rgba(0, 0, 0, 0.03);
  373. color: rgba(0, 0, 0, 0.95);
  374. }
  375. /*--------------
  376. Pressed
  377. ---------------*/
  378. .ui.link.menu .item:active,
  379. .ui.menu .link.item:active,
  380. .ui.menu a.item:active {
  381. background: rgba(0, 0, 0, 0.03);
  382. color: rgba(0, 0, 0, 0.95);
  383. }
  384. /*--------------
  385. Active
  386. ---------------*/
  387. .ui.menu .active.item {
  388. background: rgba(0, 0, 0, 0.05);
  389. color: rgba(0, 0, 0, 0.95);
  390. font-weight: normal;
  391. box-shadow: none;
  392. }
  393. .ui.menu .active.item > i.icon {
  394. opacity: 1;
  395. }
  396. /*--------------
  397. Active Hover
  398. ---------------*/
  399. .ui.menu .active.item:hover,
  400. .ui.vertical.menu .active.item:hover {
  401. background-color: rgba(0, 0, 0, 0.05);
  402. color: rgba(0, 0, 0, 0.95);
  403. }
  404. /*--------------
  405. Disabled
  406. ---------------*/
  407. .ui.menu .item.disabled,
  408. .ui.menu .item.disabled:hover {
  409. cursor: default;
  410. background-color: transparent !important;
  411. color: rgba(40, 40, 40, 0.3);
  412. }
  413. /*******************************
  414. Types
  415. *******************************/
  416. /*------------------
  417. Floated Menu / Item
  418. -------------------*/
  419. /* Left Floated */
  420. .ui.menu:not(.vertical) .left.item,
  421. .ui.menu:not(.vertical) .left.menu {
  422. display: -webkit-box;
  423. display: -webkit-flex;
  424. display: -ms-flexbox;
  425. display: flex;
  426. margin-right: auto !important;
  427. }
  428. /* Right Floated */
  429. .ui.menu:not(.vertical) .right.item,
  430. .ui.menu:not(.vertical) .right.menu {
  431. display: -webkit-box;
  432. display: -webkit-flex;
  433. display: -ms-flexbox;
  434. display: flex;
  435. margin-left: auto !important;
  436. }
  437. /* Swapped Borders */
  438. .ui.menu .right.item::before,
  439. .ui.menu .right.menu > .item::before {
  440. right: auto;
  441. left: 0;
  442. }
  443. /*--------------
  444. Vertical
  445. ---------------*/
  446. .ui.vertical.menu {
  447. display: block;
  448. -webkit-box-orient: vertical;
  449. -webkit-box-direction: normal;
  450. -webkit-flex-direction: column;
  451. -ms-flex-direction: column;
  452. flex-direction: column;
  453. background: #FFFFFF;
  454. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  455. }
  456. /*--- Item ---*/
  457. .ui.vertical.menu .item {
  458. display: block;
  459. background: none;
  460. border-top: none;
  461. border-right: none;
  462. }
  463. .ui.vertical.menu > .item:first-child {
  464. border-radius: 0.28571429rem 0.28571429rem 0px 0px;
  465. }
  466. .ui.vertical.menu > .item:last-child {
  467. border-radius: 0px 0px 0.28571429rem 0.28571429rem;
  468. }
  469. /*--- Label ---*/
  470. .ui.vertical.menu .item > .label {
  471. float: right;
  472. text-align: center;
  473. }
  474. /*--- Icon ---*/
  475. .ui.vertical.menu .item > i.icon {
  476. width: 1.18em;
  477. float: right;
  478. margin: 0em 0em 0em 0.5em;
  479. }
  480. .ui.vertical.menu .item > .label + i.icon {
  481. float: none;
  482. margin: 0em 0.5em 0em 0em;
  483. }
  484. /*--- Border ---*/
  485. .ui.vertical.menu .item:before {
  486. position: absolute;
  487. content: '';
  488. top: 0%;
  489. left: 0px;
  490. width: 100%;
  491. height: 1px;
  492. background: rgba(34, 36, 38, 0.1);
  493. }
  494. .ui.vertical.menu .item:first-child:before {
  495. display: none !important;
  496. }
  497. /*--- Sub Menu ---*/
  498. .ui.vertical.menu .item > .menu {
  499. margin: 0.5em -1.14285714em 0em;
  500. }
  501. .ui.vertical.menu .menu .item {
  502. background: none;
  503. padding: 0.5em 1.33333333em;
  504. font-size: 0.85714286em;
  505. color: rgba(0, 0, 0, 0.5);
  506. }
  507. .ui.vertical.menu .item .menu a.item:hover,
  508. .ui.vertical.menu .item .menu .link.item:hover {
  509. color: rgba(0, 0, 0, 0.85);
  510. }
  511. .ui.vertical.menu .menu .item:before {
  512. display: none;
  513. }
  514. /* Vertical Active */
  515. .ui.vertical.menu .active.item {
  516. background: rgba(0, 0, 0, 0.05);
  517. border-radius: 0em;
  518. box-shadow: none;
  519. }
  520. .ui.vertical.menu > .active.item:first-child {
  521. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  522. }
  523. .ui.vertical.menu > .active.item:last-child {
  524. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  525. }
  526. .ui.vertical.menu > .active.item:only-child {
  527. border-radius: 0.28571429rem;
  528. }
  529. .ui.vertical.menu .active.item .menu .active.item {
  530. border-left: none;
  531. }
  532. .ui.vertical.menu .item .menu .active.item {
  533. background-color: transparent;
  534. font-weight: bold;
  535. color: rgba(0, 0, 0, 0.95);
  536. }
  537. /*--------------
  538. Tabular
  539. ---------------*/
  540. .ui.tabular.menu {
  541. border-radius: 0em;
  542. box-shadow: none !important;
  543. border: none;
  544. background: none transparent;
  545. border-bottom: 1px solid #D4D4D5;
  546. }
  547. .ui.tabular.fluid.menu {
  548. width: calc(100% + 2px ) !important;
  549. }
  550. .ui.tabular.menu .item {
  551. background: transparent;
  552. border-bottom: none;
  553. border-left: 1px solid transparent;
  554. border-right: 1px solid transparent;
  555. border-top: 2px solid transparent;
  556. padding: 0.92857143em 1.42857143em;
  557. color: rgba(0, 0, 0, 0.87);
  558. }
  559. .ui.tabular.menu .item:before {
  560. display: none;
  561. }
  562. /* Hover */
  563. .ui.tabular.menu .item:hover {
  564. background-color: transparent;
  565. color: rgba(0, 0, 0, 0.8);
  566. }
  567. /* Active */
  568. .ui.tabular.menu .active.item {
  569. background: none #FFFFFF;
  570. color: rgba(0, 0, 0, 0.95);
  571. border-top-width: 1px;
  572. border-color: #D4D4D5;
  573. font-weight: bold;
  574. margin-bottom: -1px;
  575. box-shadow: none;
  576. border-radius: 0.28571429rem 0.28571429rem 0px 0px !important;
  577. }
  578. /* Coupling with segment for attachment */
  579. .ui.tabular.menu + .attached:not(.top).segment,
  580. .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
  581. border-top: none;
  582. margin: 0px;
  583. width: 100%;
  584. }
  585. .top.attached.segment + .ui.bottom.tabular.menu {
  586. position: relative;
  587. width: calc(100% + 2px );
  588. left: -1px;
  589. }
  590. /* Bottom Vertical Tabular */
  591. .ui.bottom.tabular.menu {
  592. background: none transparent;
  593. border-radius: 0em;
  594. box-shadow: none !important;
  595. border-bottom: none;
  596. border-top: 1px solid #D4D4D5;
  597. }
  598. .ui.bottom.tabular.menu .item {
  599. background: none;
  600. border-left: 1px solid transparent;
  601. border-right: 1px solid transparent;
  602. border-bottom: 1px solid transparent;
  603. border-top: none;
  604. }
  605. .ui.bottom.tabular.menu .active.item {
  606. background: none #FFFFFF;
  607. color: rgba(0, 0, 0, 0.95);
  608. border-color: #D4D4D5;
  609. margin: -1px 0px 0px 0px;
  610. border-radius: 0px 0px 0.28571429rem 0.28571429rem !important;
  611. }
  612. /* Vertical Tabular (Left) */
  613. .ui.vertical.tabular.menu {
  614. background: none transparent;
  615. border-radius: 0em;
  616. box-shadow: none !important;
  617. border-bottom: none;
  618. border-right: 1px solid #D4D4D5;
  619. }
  620. .ui.vertical.tabular.menu .item {
  621. background: none;
  622. border-left: 1px solid transparent;
  623. border-bottom: 1px solid transparent;
  624. border-top: 1px solid transparent;
  625. border-right: none;
  626. }
  627. .ui.vertical.tabular.menu .active.item {
  628. background: none #FFFFFF;
  629. color: rgba(0, 0, 0, 0.95);
  630. border-color: #D4D4D5;
  631. margin: 0px -1px 0px 0px;
  632. border-radius: 0.28571429rem 0px 0px 0.28571429rem !important;
  633. }
  634. /* Vertical Right Tabular */
  635. .ui.vertical.right.tabular.menu {
  636. background: none transparent;
  637. border-radius: 0em;
  638. box-shadow: none !important;
  639. border-bottom: none;
  640. border-right: none;
  641. border-left: 1px solid #D4D4D5;
  642. }
  643. .ui.vertical.right.tabular.menu .item {
  644. background: none;
  645. border-right: 1px solid transparent;
  646. border-bottom: 1px solid transparent;
  647. border-top: 1px solid transparent;
  648. border-left: none;
  649. }
  650. .ui.vertical.right.tabular.menu .active.item {
  651. background: none #FFFFFF;
  652. color: rgba(0, 0, 0, 0.95);
  653. border-color: #D4D4D5;
  654. margin: 0px 0px 0px -1px;
  655. border-radius: 0px 0.28571429rem 0.28571429rem 0px !important;
  656. }
  657. /* Dropdown */
  658. .ui.tabular.menu .active.dropdown.item {
  659. margin-bottom: 0px;
  660. border-left: 1px solid transparent;
  661. border-right: 1px solid transparent;
  662. border-top: 2px solid transparent;
  663. border-bottom: none;
  664. }
  665. /*--------------
  666. Pagination
  667. ---------------*/
  668. .ui.pagination.menu {
  669. margin: 0em;
  670. display: -webkit-inline-box;
  671. display: -webkit-inline-flex;
  672. display: -ms-inline-flexbox;
  673. display: inline-flex;
  674. vertical-align: middle;
  675. }
  676. .ui.pagination.menu .item:last-child {
  677. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  678. }
  679. .ui.compact.menu .item:last-child {
  680. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  681. }
  682. .ui.pagination.menu .item:last-child:before {
  683. display: none;
  684. }
  685. .ui.pagination.menu .item {
  686. min-width: 3em;
  687. text-align: center;
  688. }
  689. .ui.pagination.menu .icon.item i.icon {
  690. vertical-align: top;
  691. }
  692. /* Active */
  693. .ui.pagination.menu .active.item {
  694. border-top: none;
  695. padding-top: 0.92857143em;
  696. background-color: rgba(0, 0, 0, 0.05);
  697. color: rgba(0, 0, 0, 0.95);
  698. box-shadow: none;
  699. }
  700. /*--------------
  701. Secondary
  702. ---------------*/
  703. .ui.secondary.menu {
  704. background: none;
  705. margin-left: -0.35714286em;
  706. margin-right: -0.35714286em;
  707. border-radius: 0em;
  708. border: none;
  709. box-shadow: none;
  710. }
  711. /* Item */
  712. .ui.secondary.menu .item {
  713. -webkit-align-self: center;
  714. -ms-flex-item-align: center;
  715. align-self: center;
  716. box-shadow: none;
  717. border: none;
  718. padding: 0.78571429em 0.92857143em;
  719. margin: 0em 0.35714286em;
  720. background: none;
  721. -webkit-transition: color 0.1s ease;
  722. transition: color 0.1s ease;
  723. border-radius: 0.28571429rem;
  724. }
  725. /* No Divider */
  726. .ui.secondary.menu .item:before {
  727. display: none !important;
  728. }
  729. /* Header */
  730. .ui.secondary.menu .header.item {
  731. border-radius: 0em;
  732. border-right: none;
  733. background: none transparent;
  734. }
  735. /* Image */
  736. .ui.secondary.menu .item > img:not(.ui) {
  737. margin: 0em;
  738. }
  739. /* Hover */
  740. .ui.secondary.menu .dropdown.item:hover,
  741. .ui.secondary.menu .link.item:hover,
  742. .ui.secondary.menu a.item:hover {
  743. background: rgba(0, 0, 0, 0.05);
  744. color: rgba(0, 0, 0, 0.95);
  745. }
  746. /* Active */
  747. .ui.secondary.menu .active.item {
  748. box-shadow: none;
  749. background: rgba(0, 0, 0, 0.05);
  750. color: rgba(0, 0, 0, 0.95);
  751. border-radius: 0.28571429rem;
  752. }
  753. /* Active Hover */
  754. .ui.secondary.menu .active.item:hover {
  755. box-shadow: none;
  756. background: rgba(0, 0, 0, 0.05);
  757. color: rgba(0, 0, 0, 0.95);
  758. }
  759. /* Inverted */
  760. .ui.secondary.inverted.menu .link.item,
  761. .ui.secondary.inverted.menu a.item {
  762. color: rgba(255, 255, 255, 0.7) !important;
  763. }
  764. .ui.secondary.inverted.menu .dropdown.item:hover,
  765. .ui.secondary.inverted.menu .link.item:hover,
  766. .ui.secondary.inverted.menu a.item:hover {
  767. background: rgba(255, 255, 255, 0.08);
  768. color: #ffffff !important;
  769. }
  770. .ui.secondary.inverted.menu .active.item {
  771. background: rgba(255, 255, 255, 0.15);
  772. color: #ffffff !important;
  773. }
  774. /* Fix item margins */
  775. .ui.secondary.item.menu {
  776. margin-left: 0em;
  777. margin-right: 0em;
  778. }
  779. .ui.secondary.item.menu .item:last-child {
  780. margin-right: 0em;
  781. }
  782. .ui.secondary.attached.menu {
  783. box-shadow: none;
  784. }
  785. /* Sub Menu */
  786. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
  787. margin: 0em -0.92857143em;
  788. }
  789. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
  790. margin: 0em;
  791. padding: 0.5em 1.33333333em;
  792. }
  793. /*---------------------
  794. Secondary Vertical
  795. -----------------------*/
  796. .ui.secondary.vertical.menu > .item {
  797. border: none;
  798. margin: 0em 0em 0.35714286em;
  799. border-radius: 0.28571429rem !important;
  800. }
  801. .ui.secondary.vertical.menu > .header.item {
  802. border-radius: 0em;
  803. }
  804. /* Sub Menu */
  805. .ui.vertical.secondary.menu .item > .menu .item {
  806. background-color: transparent;
  807. }
  808. /* Inverted */
  809. .ui.secondary.inverted.menu {
  810. background-color: transparent;
  811. }
  812. /*---------------------
  813. Secondary Pointing
  814. -----------------------*/
  815. .ui.secondary.pointing.menu {
  816. margin-left: 0em;
  817. margin-right: 0em;
  818. border-bottom: 2px solid rgba(34, 36, 38, 0.15);
  819. }
  820. .ui.secondary.pointing.menu .item {
  821. border-bottom-color: transparent;
  822. border-bottom-style: solid;
  823. border-radius: 0em;
  824. -webkit-align-self: flex-end;
  825. -ms-flex-item-align: end;
  826. align-self: flex-end;
  827. margin: 0em 0em -2px;
  828. padding: 0.85714286em 1.14285714em;
  829. border-bottom-width: 2px;
  830. -webkit-transition: color 0.1s ease;
  831. transition: color 0.1s ease;
  832. }
  833. /* Item Types */
  834. .ui.secondary.pointing.menu .header.item {
  835. color: rgba(0, 0, 0, 0.85) !important;
  836. }
  837. .ui.secondary.pointing.menu .text.item {
  838. box-shadow: none !important;
  839. }
  840. .ui.secondary.pointing.menu .item:after {
  841. display: none;
  842. }
  843. /* Hover */
  844. .ui.secondary.pointing.menu .dropdown.item:hover,
  845. .ui.secondary.pointing.menu .link.item:hover,
  846. .ui.secondary.pointing.menu a.item:hover {
  847. background-color: transparent;
  848. color: rgba(0, 0, 0, 0.87);
  849. }
  850. /* Pressed */
  851. .ui.secondary.pointing.menu .dropdown.item:active,
  852. .ui.secondary.pointing.menu .link.item:active,
  853. .ui.secondary.pointing.menu a.item:active {
  854. background-color: transparent;
  855. border-color: rgba(34, 36, 38, 0.15);
  856. }
  857. /* Active */
  858. .ui.secondary.pointing.menu .active.item {
  859. background-color: transparent;
  860. box-shadow: none;
  861. border-color: #1B1C1D;
  862. font-weight: bold;
  863. color: rgba(0, 0, 0, 0.95);
  864. }
  865. /* Active Hover */
  866. .ui.secondary.pointing.menu .active.item:hover {
  867. border-color: #1B1C1D;
  868. color: rgba(0, 0, 0, 0.95);
  869. }
  870. /* Active Dropdown */
  871. .ui.secondary.pointing.menu .active.dropdown.item {
  872. border-color: transparent;
  873. }
  874. /* Vertical Pointing */
  875. .ui.secondary.vertical.pointing.menu {
  876. border-bottom-width: 0px;
  877. border-right-width: 2px;
  878. border-right-style: solid;
  879. border-right-color: rgba(34, 36, 38, 0.15);
  880. }
  881. .ui.secondary.vertical.pointing.menu .item {
  882. border-bottom: none;
  883. border-right-style: solid;
  884. border-right-color: transparent;
  885. border-radius: 0em !important;
  886. margin: 0em -2px 0em 0em;
  887. border-right-width: 2px;
  888. }
  889. /* Vertical Active */
  890. .ui.secondary.vertical.pointing.menu .active.item {
  891. border-color: #1B1C1D;
  892. }
  893. /* Inverted */
  894. .ui.secondary.inverted.pointing.menu {
  895. border-color: rgba(255, 255, 255, 0.1);
  896. }
  897. .ui.secondary.inverted.pointing.menu {
  898. border-width: 2px;
  899. border-color: rgba(34, 36, 38, 0.15);
  900. }
  901. .ui.secondary.inverted.pointing.menu .item {
  902. color: rgba(255, 255, 255, 0.9);
  903. }
  904. .ui.secondary.inverted.pointing.menu .header.item {
  905. color: #FFFFFF !important;
  906. }
  907. /* Hover */
  908. .ui.secondary.inverted.pointing.menu .link.item:hover,
  909. .ui.secondary.inverted.pointing.menu a.item:hover {
  910. color: rgba(0, 0, 0, 0.95);
  911. }
  912. /* Active */
  913. .ui.secondary.inverted.pointing.menu .active.item {
  914. border-color: #FFFFFF;
  915. color: #ffffff;
  916. }
  917. /*--------------
  918. Text Menu
  919. ---------------*/
  920. .ui.text.menu {
  921. background: none transparent;
  922. border-radius: 0px;
  923. box-shadow: none;
  924. border: none;
  925. margin: 1em -0.5em;
  926. }
  927. .ui.text.menu .item {
  928. border-radius: 0px;
  929. box-shadow: none;
  930. -webkit-align-self: center;
  931. -ms-flex-item-align: center;
  932. align-self: center;
  933. margin: 0em 0em;
  934. padding: 0.35714286em 0.5em;
  935. font-weight: normal;
  936. color: rgba(0, 0, 0, 0.6);
  937. -webkit-transition: opacity 0.1s ease;
  938. transition: opacity 0.1s ease;
  939. }
  940. /* Border */
  941. .ui.text.menu .item:before,
  942. .ui.text.menu .menu .item:before {
  943. display: none !important;
  944. }
  945. /* Header */
  946. .ui.text.menu .header.item {
  947. background-color: transparent;
  948. opacity: 1;
  949. color: rgba(0, 0, 0, 0.85);
  950. font-size: 0.92857143em;
  951. text-transform: uppercase;
  952. font-weight: bold;
  953. }
  954. /* Image */
  955. .ui.text.menu .item > img:not(.ui) {
  956. margin: 0em;
  957. }
  958. /*--- fluid text ---*/
  959. .ui.text.item.menu .item {
  960. margin: 0em;
  961. }
  962. /*--- vertical text ---*/
  963. .ui.vertical.text.menu {
  964. margin: 1em 0em;
  965. }
  966. .ui.vertical.text.menu:first-child {
  967. margin-top: 0rem;
  968. }
  969. .ui.vertical.text.menu:last-child {
  970. margin-bottom: 0rem;
  971. }
  972. .ui.vertical.text.menu .item {
  973. margin: 0.57142857em 0em;
  974. }
  975. .ui.vertical.text.menu .item > i.icon {
  976. float: none;
  977. margin: 0em 0.35714286em 0em 0em;
  978. }
  979. .ui.vertical.text.menu .header.item {
  980. margin: 0.57142857em 0em 0.71428571em;
  981. }
  982. /* Vertical Sub Menu */
  983. .ui.vertical.text.menu .item:not(.dropdown) > .menu {
  984. margin: 0em;
  985. }
  986. .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
  987. margin: 0em;
  988. padding: 0.5em 0em;
  989. }
  990. /*--- hover ---*/
  991. .ui.text.menu .item:hover {
  992. opacity: 1;
  993. background-color: transparent;
  994. }
  995. /*--- active ---*/
  996. .ui.text.menu .active.item {
  997. background-color: transparent;
  998. border: none;
  999. box-shadow: none;
  1000. font-weight: normal;
  1001. color: rgba(0, 0, 0, 0.95);
  1002. }
  1003. /*--- active hover ---*/
  1004. .ui.text.menu .active.item:hover {
  1005. background-color: transparent;
  1006. }
  1007. /* Disable Bariations */
  1008. .ui.text.pointing.menu .active.item:after {
  1009. box-shadow: none;
  1010. }
  1011. .ui.text.attached.menu {
  1012. box-shadow: none;
  1013. }
  1014. /* Inverted */
  1015. .ui.inverted.text.menu,
  1016. .ui.inverted.text.menu .item,
  1017. .ui.inverted.text.menu .item:hover,
  1018. .ui.inverted.text.menu .active.item {
  1019. background-color: transparent !important;
  1020. }
  1021. /* Fluid */
  1022. .ui.fluid.text.menu {
  1023. margin-left: 0em;
  1024. margin-right: 0em;
  1025. }
  1026. /*--------------
  1027. Icon Only
  1028. ---------------*/
  1029. /* Vertical Menu */
  1030. .ui.vertical.icon.menu {
  1031. display: inline-block;
  1032. width: auto;
  1033. }
  1034. /* Item */
  1035. .ui.icon.menu .item {
  1036. height: auto;
  1037. text-align: center;
  1038. color: #1B1C1D;
  1039. }
  1040. /* Icon */
  1041. .ui.icon.menu .item > .icon:not(.dropdown) {
  1042. margin: 0;
  1043. opacity: 1;
  1044. }
  1045. /* Icon Gylph */
  1046. .ui.icon.menu .icon:before {
  1047. opacity: 1;
  1048. }
  1049. /* (x) Item Icon */
  1050. .ui.menu .icon.item > .icon {
  1051. width: auto;
  1052. margin: 0em auto;
  1053. }
  1054. /* Vertical Icon */
  1055. .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
  1056. display: block;
  1057. opacity: 1;
  1058. margin: 0em auto;
  1059. float: none;
  1060. }
  1061. /* Inverted */
  1062. .ui.inverted.icon.menu .item {
  1063. color: #FFFFFF;
  1064. }
  1065. /*--------------
  1066. Labeled Icon
  1067. ---------------*/
  1068. /* Menu */
  1069. .ui.labeled.icon.menu {
  1070. text-align: center;
  1071. }
  1072. /* Item */
  1073. .ui.labeled.icon.menu .item {
  1074. min-width: 6em;
  1075. -webkit-box-orient: vertical;
  1076. -webkit-box-direction: normal;
  1077. -webkit-flex-direction: column;
  1078. -ms-flex-direction: column;
  1079. flex-direction: column;
  1080. }
  1081. /* Icon */
  1082. .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
  1083. height: 1em;
  1084. display: block;
  1085. font-size: 1.71428571em !important;
  1086. margin: 0em auto 0.5rem !important;
  1087. }
  1088. /* Fluid */
  1089. .ui.fluid.labeled.icon.menu > .item {
  1090. min-width: 0em;
  1091. }
  1092. /*******************************
  1093. Variations
  1094. *******************************/
  1095. /*--------------
  1096. Stackable
  1097. ---------------*/
  1098. @media only screen and (max-width: 767px) {
  1099. .ui.stackable.menu {
  1100. -webkit-box-orient: vertical;
  1101. -webkit-box-direction: normal;
  1102. -webkit-flex-direction: column;
  1103. -ms-flex-direction: column;
  1104. flex-direction: column;
  1105. }
  1106. .ui.stackable.menu .item {
  1107. width: 100% !important;
  1108. }
  1109. .ui.stackable.menu .item:before {
  1110. position: absolute;
  1111. content: '';
  1112. top: auto;
  1113. bottom: 0px;
  1114. left: 0px;
  1115. width: 100%;
  1116. background: rgba(34, 36, 38, 0.1);
  1117. height: 1px;
  1118. }
  1119. .ui.stackable.menu .left.menu,
  1120. .ui.stackable.menu .left.item {
  1121. margin-right: 0 !important;
  1122. }
  1123. .ui.stackable.menu .right.menu,
  1124. .ui.stackable.menu .right.item {
  1125. margin-left: 0 !important;
  1126. }
  1127. }
  1128. /*--------------
  1129. Colors
  1130. ---------------*/
  1131. /*--- Standard Colors ---*/
  1132. .ui.menu .red.active.item,
  1133. .ui.red.menu .active.item {
  1134. border-color: #DB2828 !important;
  1135. color: #DB2828 !important;
  1136. }
  1137. .ui.menu .orange.active.item,
  1138. .ui.orange.menu .active.item {
  1139. border-color: #F2711C !important;
  1140. color: #F2711C !important;
  1141. }
  1142. .ui.menu .yellow.active.item,
  1143. .ui.yellow.menu .active.item {
  1144. border-color: #FBBD08 !important;
  1145. color: #FBBD08 !important;
  1146. }
  1147. .ui.menu .olive.active.item,
  1148. .ui.olive.menu .active.item {
  1149. border-color: #B5CC18 !important;
  1150. color: #B5CC18 !important;
  1151. }
  1152. .ui.menu .green.active.item,
  1153. .ui.green.menu .active.item {
  1154. border-color: #21BA45 !important;
  1155. color: #21BA45 !important;
  1156. }
  1157. .ui.menu .teal.active.item,
  1158. .ui.teal.menu .active.item {
  1159. border-color: #00B5AD !important;
  1160. color: #00B5AD !important;
  1161. }
  1162. .ui.menu .blue.active.item,
  1163. .ui.blue.menu .active.item {
  1164. border-color: #2185D0 !important;
  1165. color: #2185D0 !important;
  1166. }
  1167. .ui.menu .violet.active.item,
  1168. .ui.violet.menu .active.item {
  1169. border-color: #6435C9 !important;
  1170. color: #6435C9 !important;
  1171. }
  1172. .ui.menu .purple.active.item,
  1173. .ui.purple.menu .active.item {
  1174. border-color: #A333C8 !important;
  1175. color: #A333C8 !important;
  1176. }
  1177. .ui.menu .pink.active.item,
  1178. .ui.pink.menu .active.item {
  1179. border-color: #E03997 !important;
  1180. color: #E03997 !important;
  1181. }
  1182. .ui.menu .brown.active.item,
  1183. .ui.brown.menu .active.item {
  1184. border-color: #A5673F !important;
  1185. color: #A5673F !important;
  1186. }
  1187. .ui.menu .grey.active.item,
  1188. .ui.grey.menu .active.item {
  1189. border-color: #767676 !important;
  1190. color: #767676 !important;
  1191. }
  1192. /*--------------
  1193. Inverted
  1194. ---------------*/
  1195. .ui.inverted.menu {
  1196. border: 0px solid transparent;
  1197. background: #1B1C1D;
  1198. box-shadow: none;
  1199. }
  1200. /* Menu Item */
  1201. .ui.inverted.menu .item,
  1202. .ui.inverted.menu .item > a:not(.ui) {
  1203. background: transparent;
  1204. color: rgba(255, 255, 255, 0.9);
  1205. }
  1206. .ui.inverted.menu .item.menu {
  1207. background: transparent;
  1208. }
  1209. /*--- Border ---*/
  1210. .ui.inverted.menu .item:before {
  1211. background: rgba(255, 255, 255, 0.08);
  1212. }
  1213. .ui.vertical.inverted.menu .item:before {
  1214. background: rgba(255, 255, 255, 0.08);
  1215. }
  1216. /* Sub Menu */
  1217. .ui.vertical.inverted.menu .menu .item,
  1218. .ui.vertical.inverted.menu .menu .item a:not(.ui) {
  1219. color: rgba(255, 255, 255, 0.5);
  1220. }
  1221. /* Header */
  1222. .ui.inverted.menu .header.item {
  1223. margin: 0em;
  1224. background: transparent;
  1225. box-shadow: none;
  1226. }
  1227. /* Disabled */
  1228. .ui.inverted.menu .item.disabled,
  1229. .ui.inverted.menu .item.disabled:hover {
  1230. color: rgba(225, 225, 225, 0.3);
  1231. }
  1232. /*--- Hover ---*/
  1233. .ui.link.inverted.menu .item:hover,
  1234. .ui.inverted.menu .dropdown.item:hover,
  1235. .ui.inverted.menu .link.item:hover,
  1236. .ui.inverted.menu a.item:hover {
  1237. background: rgba(255, 255, 255, 0.08);
  1238. color: #ffffff;
  1239. }
  1240. .ui.vertical.inverted.menu .item .menu a.item:hover,
  1241. .ui.vertical.inverted.menu .item .menu .link.item:hover {
  1242. background: transparent;
  1243. color: #ffffff;
  1244. }
  1245. /*--- Pressed ---*/
  1246. .ui.inverted.menu a.item:active,
  1247. .ui.inverted.menu .link.item:active,
  1248. .ui.inverted.menu a.item:active {
  1249. background: rgba(255, 255, 255, 0.08);
  1250. color: #ffffff;
  1251. }
  1252. /*--- Active ---*/
  1253. .ui.inverted.menu .active.item {
  1254. background: rgba(255, 255, 255, 0.15);
  1255. color: #ffffff !important;
  1256. }
  1257. .ui.inverted.vertical.menu .item .menu .active.item {
  1258. background: transparent;
  1259. color: #FFFFFF;
  1260. }
  1261. .ui.inverted.pointing.menu .active.item:after {
  1262. background: #3D3E3F !important;
  1263. margin: 0em !important;
  1264. box-shadow: none !important;
  1265. border: none !important;
  1266. }
  1267. /*--- Active Hover ---*/
  1268. .ui.inverted.menu .active.item:hover {
  1269. background: rgba(255, 255, 255, 0.15);
  1270. color: #FFFFFF !important;
  1271. }
  1272. .ui.inverted.pointing.menu .active.item:hover:after {
  1273. background: #3D3E3F !important;
  1274. }
  1275. /*--------------
  1276. Floated
  1277. ---------------*/
  1278. .ui.floated.menu {
  1279. float: left;
  1280. margin: 0rem 0.5rem 0rem 0rem;
  1281. }
  1282. .ui.floated.menu .item:last-child:before {
  1283. display: none;
  1284. }
  1285. .ui.right.floated.menu {
  1286. float: right;
  1287. margin: 0rem 0rem 0rem 0.5rem;
  1288. }
  1289. /*--------------
  1290. Inverted
  1291. ---------------*/
  1292. /* Red */
  1293. .ui.inverted.menu .red.active.item,
  1294. .ui.inverted.red.menu {
  1295. background-color: #DB2828;
  1296. }
  1297. .ui.inverted.red.menu .item:before {
  1298. background-color: rgba(34, 36, 38, 0.1);
  1299. }
  1300. .ui.inverted.red.menu .active.item {
  1301. background-color: rgba(0, 0, 0, 0.1) !important;
  1302. }
  1303. /* Orange */
  1304. .ui.inverted.menu .orange.active.item,
  1305. .ui.inverted.orange.menu {
  1306. background-color: #F2711C;
  1307. }
  1308. .ui.inverted.orange.menu .item:before {
  1309. background-color: rgba(34, 36, 38, 0.1);
  1310. }
  1311. .ui.inverted.orange.menu .active.item {
  1312. background-color: rgba(0, 0, 0, 0.1) !important;
  1313. }
  1314. /* Yellow */
  1315. .ui.inverted.menu .yellow.active.item,
  1316. .ui.inverted.yellow.menu {
  1317. background-color: #FBBD08;
  1318. }
  1319. .ui.inverted.yellow.menu .item:before {
  1320. background-color: rgba(34, 36, 38, 0.1);
  1321. }
  1322. .ui.inverted.yellow.menu .active.item {
  1323. background-color: rgba(0, 0, 0, 0.1) !important;
  1324. }
  1325. /* Olive */
  1326. .ui.inverted.menu .olive.active.item,
  1327. .ui.inverted.olive.menu {
  1328. background-color: #B5CC18;
  1329. }
  1330. .ui.inverted.olive.menu .item:before {
  1331. background-color: rgba(34, 36, 38, 0.1);
  1332. }
  1333. .ui.inverted.olive.menu .active.item {
  1334. background-color: rgba(0, 0, 0, 0.1) !important;
  1335. }
  1336. /* Green */
  1337. .ui.inverted.menu .green.active.item,
  1338. .ui.inverted.green.menu {
  1339. background-color: #21BA45;
  1340. }
  1341. .ui.inverted.green.menu .item:before {
  1342. background-color: rgba(34, 36, 38, 0.1);
  1343. }
  1344. .ui.inverted.green.menu .active.item {
  1345. background-color: rgba(0, 0, 0, 0.1) !important;
  1346. }
  1347. /* Teal */
  1348. .ui.inverted.menu .teal.active.item,
  1349. .ui.inverted.teal.menu {
  1350. background-color: #00B5AD;
  1351. }
  1352. .ui.inverted.teal.menu .item:before {
  1353. background-color: rgba(34, 36, 38, 0.1);
  1354. }
  1355. .ui.inverted.teal.menu .active.item {
  1356. background-color: rgba(0, 0, 0, 0.1) !important;
  1357. }
  1358. /* Blue */
  1359. .ui.inverted.menu .blue.active.item,
  1360. .ui.inverted.blue.menu {
  1361. background-color: #2185D0;
  1362. }
  1363. .ui.inverted.blue.menu .item:before {
  1364. background-color: rgba(34, 36, 38, 0.1);
  1365. }
  1366. .ui.inverted.blue.menu .active.item {
  1367. background-color: rgba(0, 0, 0, 0.1) !important;
  1368. }
  1369. /* Violet */
  1370. .ui.inverted.menu .violet.active.item,
  1371. .ui.inverted.violet.menu {
  1372. background-color: #6435C9;
  1373. }
  1374. .ui.inverted.violet.menu .item:before {
  1375. background-color: rgba(34, 36, 38, 0.1);
  1376. }
  1377. .ui.inverted.violet.menu .active.item {
  1378. background-color: rgba(0, 0, 0, 0.1) !important;
  1379. }
  1380. /* Purple */
  1381. .ui.inverted.menu .purple.active.item,
  1382. .ui.inverted.purple.menu {
  1383. background-color: #A333C8;
  1384. }
  1385. .ui.inverted.purple.menu .item:before {
  1386. background-color: rgba(34, 36, 38, 0.1);
  1387. }
  1388. .ui.inverted.purple.menu .active.item {
  1389. background-color: rgba(0, 0, 0, 0.1) !important;
  1390. }
  1391. /* Pink */
  1392. .ui.inverted.menu .pink.active.item,
  1393. .ui.inverted.pink.menu {
  1394. background-color: #E03997;
  1395. }
  1396. .ui.inverted.pink.menu .item:before {
  1397. background-color: rgba(34, 36, 38, 0.1);
  1398. }
  1399. .ui.inverted.pink.menu .active.item {
  1400. background-color: rgba(0, 0, 0, 0.1) !important;
  1401. }
  1402. /* Brown */
  1403. .ui.inverted.menu .brown.active.item,
  1404. .ui.inverted.brown.menu {
  1405. background-color: #A5673F;
  1406. }
  1407. .ui.inverted.brown.menu .item:before {
  1408. background-color: rgba(34, 36, 38, 0.1);
  1409. }
  1410. .ui.inverted.brown.menu .active.item {
  1411. background-color: rgba(0, 0, 0, 0.1) !important;
  1412. }
  1413. /* Grey */
  1414. .ui.inverted.menu .grey.active.item,
  1415. .ui.inverted.grey.menu {
  1416. background-color: #767676;
  1417. }
  1418. .ui.inverted.grey.menu .item:before {
  1419. background-color: rgba(34, 36, 38, 0.1);
  1420. }
  1421. .ui.inverted.grey.menu .active.item {
  1422. background-color: rgba(0, 0, 0, 0.1) !important;
  1423. }
  1424. /*--------------
  1425. Fitted
  1426. ---------------*/
  1427. .ui.fitted.menu .item,
  1428. .ui.fitted.menu .item .menu .item,
  1429. .ui.menu .fitted.item {
  1430. padding: 0em;
  1431. }
  1432. .ui.horizontally.fitted.menu .item,
  1433. .ui.horizontally.fitted.menu .item .menu .item,
  1434. .ui.menu .horizontally.fitted.item {
  1435. padding-top: 0.92857143em;
  1436. padding-bottom: 0.92857143em;
  1437. }
  1438. .ui.vertically.fitted.menu .item,
  1439. .ui.vertically.fitted.menu .item .menu .item,
  1440. .ui.menu .vertically.fitted.item {
  1441. padding-left: 1.14285714em;
  1442. padding-right: 1.14285714em;
  1443. }
  1444. /*--------------
  1445. Borderless
  1446. ---------------*/
  1447. .ui.borderless.menu .item:before,
  1448. .ui.borderless.menu .item .menu .item:before,
  1449. .ui.menu .borderless.item:before {
  1450. background: none !important;
  1451. }
  1452. /*-------------------
  1453. Compact
  1454. --------------------*/
  1455. .ui.compact.menu {
  1456. display: -webkit-inline-box;
  1457. display: -webkit-inline-flex;
  1458. display: -ms-inline-flexbox;
  1459. display: inline-flex;
  1460. margin: 0em;
  1461. vertical-align: middle;
  1462. }
  1463. .ui.compact.vertical.menu {
  1464. display: inline-block;
  1465. }
  1466. .ui.compact.menu .item:last-child {
  1467. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  1468. }
  1469. .ui.compact.menu .item:last-child:before {
  1470. display: none;
  1471. }
  1472. .ui.compact.vertical.menu {
  1473. width: auto !important;
  1474. }
  1475. .ui.compact.vertical.menu .item:last-child::before {
  1476. display: block;
  1477. }
  1478. /*-------------------
  1479. Fluid
  1480. --------------------*/
  1481. .ui.menu.fluid,
  1482. .ui.vertical.menu.fluid {
  1483. width: 100% !important;
  1484. }
  1485. /*-------------------
  1486. Evenly Sized
  1487. --------------------*/
  1488. .ui.item.menu,
  1489. .ui.item.menu .item {
  1490. width: 100%;
  1491. padding-left: 0em !important;
  1492. padding-right: 0em !important;
  1493. margin-left: 0em !important;
  1494. margin-right: 0em !important;
  1495. text-align: center;
  1496. -webkit-box-pack: center;
  1497. -webkit-justify-content: center;
  1498. -ms-flex-pack: center;
  1499. justify-content: center;
  1500. }
  1501. .ui.item.menu .item:last-child:before {
  1502. display: none;
  1503. }
  1504. .ui.menu.two.item .item {
  1505. width: 50%;
  1506. }
  1507. .ui.menu.three.item .item {
  1508. width: 33.333%;
  1509. }
  1510. .ui.menu.four.item .item {
  1511. width: 25%;
  1512. }
  1513. .ui.menu.five.item .item {
  1514. width: 20%;
  1515. }
  1516. .ui.menu.six.item .item {
  1517. width: 16.666%;
  1518. }
  1519. .ui.menu.seven.item .item {
  1520. width: 14.285%;
  1521. }
  1522. .ui.menu.eight.item .item {
  1523. width: 12.500%;
  1524. }
  1525. .ui.menu.nine.item .item {
  1526. width: 11.11%;
  1527. }
  1528. .ui.menu.ten.item .item {
  1529. width: 10.0%;
  1530. }
  1531. .ui.menu.eleven.item .item {
  1532. width: 9.09%;
  1533. }
  1534. .ui.menu.twelve.item .item {
  1535. width: 8.333%;
  1536. }
  1537. /*--------------
  1538. Fixed
  1539. ---------------*/
  1540. .ui.menu.fixed {
  1541. position: fixed;
  1542. z-index: 101;
  1543. margin: 0em;
  1544. width: 100%;
  1545. }
  1546. .ui.menu.fixed,
  1547. .ui.menu.fixed .item:first-child,
  1548. .ui.menu.fixed .item:last-child {
  1549. border-radius: 0px !important;
  1550. }
  1551. .ui.fixed.menu,
  1552. .ui[class*="top fixed"].menu {
  1553. top: 0px;
  1554. left: 0px;
  1555. right: auto;
  1556. bottom: auto;
  1557. }
  1558. .ui[class*="top fixed"].menu {
  1559. border-top: none;
  1560. border-left: none;
  1561. border-right: none;
  1562. }
  1563. .ui[class*="right fixed"].menu {
  1564. border-top: none;
  1565. border-bottom: none;
  1566. border-right: none;
  1567. top: 0px;
  1568. right: 0px;
  1569. left: auto;
  1570. bottom: auto;
  1571. width: auto;
  1572. height: 100%;
  1573. }
  1574. .ui[class*="bottom fixed"].menu {
  1575. border-bottom: none;
  1576. border-left: none;
  1577. border-right: none;
  1578. bottom: 0px;
  1579. left: 0px;
  1580. top: auto;
  1581. right: auto;
  1582. }
  1583. .ui[class*="left fixed"].menu {
  1584. border-top: none;
  1585. border-bottom: none;
  1586. border-left: none;
  1587. top: 0px;
  1588. left: 0px;
  1589. right: auto;
  1590. bottom: auto;
  1591. width: auto;
  1592. height: 100%;
  1593. }
  1594. /* Coupling with Grid */
  1595. .ui.fixed.menu + .ui.grid {
  1596. padding-top: 2.75rem;
  1597. }
  1598. /*-------------------
  1599. Pointing
  1600. --------------------*/
  1601. .ui.pointing.menu .item:after {
  1602. visibility: hidden;
  1603. position: absolute;
  1604. content: '';
  1605. top: 100%;
  1606. left: 50%;
  1607. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1608. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1609. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1610. background: none;
  1611. margin: 0.5px 0em 0em;
  1612. width: 0.57142857em;
  1613. height: 0.57142857em;
  1614. border: none;
  1615. border-bottom: 1px solid #D4D4D5;
  1616. border-right: 1px solid #D4D4D5;
  1617. z-index: 2;
  1618. -webkit-transition: background 0.1s ease;
  1619. transition: background 0.1s ease;
  1620. }
  1621. .ui.vertical.pointing.menu .item:after {
  1622. position: absolute;
  1623. top: 50%;
  1624. right: 0%;
  1625. bottom: auto;
  1626. left: auto;
  1627. -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1628. -ms-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1629. transform: translateX(50%) translateY(-50%) rotate(45deg);
  1630. margin: 0em -0.5px 0em 0em;
  1631. border: none;
  1632. border-top: 1px solid #D4D4D5;
  1633. border-right: 1px solid #D4D4D5;
  1634. }
  1635. /* Active */
  1636. .ui.pointing.menu .active.item:after {
  1637. visibility: visible;
  1638. }
  1639. .ui.pointing.menu .active.dropdown.item:after {
  1640. visibility: hidden;
  1641. }
  1642. /* Don't double up pointers */
  1643. .ui.pointing.menu .dropdown.active.item:after,
  1644. .ui.pointing.menu .active.item .menu .active.item:after {
  1645. display: none;
  1646. }
  1647. /* Colors */
  1648. .ui.pointing.menu .active.item:hover:after {
  1649. background-color: #F2F2F2;
  1650. }
  1651. .ui.pointing.menu .active.item:after {
  1652. background-color: #F2F2F2;
  1653. }
  1654. .ui.pointing.menu .active.item:hover:after {
  1655. background-color: #F2F2F2;
  1656. }
  1657. .ui.vertical.pointing.menu .active.item:hover:after {
  1658. background-color: #F2F2F2;
  1659. }
  1660. .ui.vertical.pointing.menu .active.item:after {
  1661. background-color: #F2F2F2;
  1662. }
  1663. .ui.vertical.pointing.menu .menu .active.item:after {
  1664. background-color: #FFFFFF;
  1665. }
  1666. /*--------------
  1667. Attached
  1668. ---------------*/
  1669. /* Middle */
  1670. .ui.attached.menu {
  1671. top: 0px;
  1672. bottom: 0px;
  1673. border-radius: 0px;
  1674. margin: 0em -1px;
  1675. width: calc(100% + 2px );
  1676. max-width: calc(100% + 2px );
  1677. box-shadow: none;
  1678. }
  1679. .ui.attached + .ui.attached.menu:not(.top) {
  1680. border-top: none;
  1681. }
  1682. /* Top */
  1683. .ui[class*="top attached"].menu {
  1684. bottom: 0px;
  1685. margin-bottom: 0em;
  1686. top: 0px;
  1687. margin-top: 1rem;
  1688. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  1689. }
  1690. .ui.menu[class*="top attached"]:first-child {
  1691. margin-top: 0em;
  1692. }
  1693. /* Bottom */
  1694. .ui[class*="bottom attached"].menu {
  1695. bottom: 0px;
  1696. margin-top: 0em;
  1697. top: 0px;
  1698. margin-bottom: 1rem;
  1699. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  1700. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  1701. }
  1702. .ui[class*="bottom attached"].menu:last-child {
  1703. margin-bottom: 0em;
  1704. }
  1705. /* Attached Menu Item */
  1706. .ui.top.attached.menu > .item:first-child {
  1707. border-radius: 0.28571429rem 0em 0em 0em;
  1708. }
  1709. .ui.bottom.attached.menu > .item:first-child {
  1710. border-radius: 0em 0em 0em 0.28571429rem;
  1711. }
  1712. /* Tabular Attached */
  1713. .ui.attached.menu:not(.tabular) {
  1714. border: 1px solid #D4D4D5;
  1715. }
  1716. .ui.attached.inverted.menu {
  1717. border: none;
  1718. }
  1719. .ui.attached.tabular.menu {
  1720. margin-left: 0;
  1721. margin-right: 0;
  1722. width: 100%;
  1723. }
  1724. /*--------------
  1725. Sizes
  1726. ---------------*/
  1727. /* Mini */
  1728. .ui.mini.menu {
  1729. font-size: 0.78571429rem;
  1730. }
  1731. .ui.mini.vertical.menu {
  1732. width: 9rem;
  1733. }
  1734. /* Tiny */
  1735. .ui.tiny.menu {
  1736. font-size: 0.85714286rem;
  1737. }
  1738. .ui.tiny.vertical.menu {
  1739. width: 11rem;
  1740. }
  1741. /* Small */
  1742. .ui.small.menu {
  1743. font-size: 0.92857143rem;
  1744. }
  1745. .ui.small.vertical.menu {
  1746. width: 13rem;
  1747. }
  1748. /* Medium */
  1749. .ui.menu {
  1750. font-size: 1rem;
  1751. }
  1752. .ui.vertical.menu {
  1753. width: 15rem;
  1754. }
  1755. /* Large */
  1756. .ui.large.menu {
  1757. font-size: 1.07142857rem;
  1758. }
  1759. .ui.large.vertical.menu {
  1760. width: 18rem;
  1761. }
  1762. /* Huge */
  1763. .ui.huge.menu {
  1764. font-size: 1.14285714rem;
  1765. }
  1766. .ui.huge.vertical.menu {
  1767. width: 20rem;
  1768. }
  1769. /* Big */
  1770. .ui.big.menu {
  1771. font-size: 1.21428571rem;
  1772. }
  1773. .ui.big.vertical.menu {
  1774. width: 22rem;
  1775. }
  1776. /* Massive */
  1777. .ui.massive.menu {
  1778. font-size: 1.28571429rem;
  1779. }
  1780. .ui.massive.vertical.menu {
  1781. width: 25rem;
  1782. }
  1783. /*******************************
  1784. Theme Overrides
  1785. *******************************/
  1786. /*******************************
  1787. Site Overrides
  1788. *******************************/