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.

1167 lines
29 KiB

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