menu_top.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. div.bx-std-menu-top-wrp {
  2. position: relative;
  3. display: -webkit-flex;
  4. display: flex;
  5. -webkit-justify-content: space-between;
  6. justify-content: space-between;
  7. -webkit-align-items: center;
  8. align-items: center;
  9. -webkit-flex-wrap: nowrap;
  10. flex-wrap: nowrap;
  11. width: 100%;
  12. height: 5rem;
  13. }
  14. div.bx-std-menu-top-wrp .bx-std-menu-top.bx-std-menu-top-center:first-child {
  15. padding-left: 0.75rem;
  16. }
  17. div.bx-std-menu-top {
  18. position: relative;
  19. }
  20. div.bx-std-menu-top.bx-std-menu-top-left,
  21. div.bx-std-menu-top.bx-std-menu-top-center,
  22. div.bx-std-menu-top.bx-std-menu-top-right {
  23. -webkit-flex: 0 1 auto;
  24. flex: 0 1 auto;
  25. }
  26. div.bx-std-menu-top.bx-std-menu-top-left,
  27. div.bx-std-menu-top.bx-std-menu-top-right {
  28. min-width: 15%;
  29. }
  30. div.bx-std-menu-top-center ul {
  31. position: relative;
  32. display: -webkit-flex;
  33. display: flex;
  34. -webkit-align-items: stretch;
  35. align-items: stretch;
  36. -webkit-flex-wrap: nowrap;
  37. flex-wrap: nowrap;
  38. }
  39. div.bx-std-menu-top-left {
  40. padding-left: 1rem;
  41. line-height: 4rem;
  42. text-align: left;
  43. font-size: 1.5rem;
  44. }
  45. div.bx-std-menu-top-right {
  46. padding-right: 1rem;
  47. text-align: right;
  48. }
  49. /*--- Breadcrumb (Left) ---*/
  50. .bx-menu-breadcrumb {
  51. position: relative;
  52. display: -webkit-flex;
  53. display: flex;
  54. -webkit-flex-wrap: nowrap;
  55. flex-wrap: nowrap;
  56. -webkit-align-items: center;
  57. align-items: center;
  58. }
  59. .bx-menu-breadcrumb li.bx-menu-bc-item {
  60. position: relative;
  61. height: 4.0rem;
  62. min-width: 1.5rem;
  63. line-height: 4.0rem;
  64. }
  65. .bx-menu-breadcrumb li.bx-menu-bc-item > a {
  66. position: relative;
  67. display: -webkit-flex;
  68. display: flex;
  69. -webkit-justify-content: center;
  70. justify-content: center;
  71. -webkit-align-items: center;
  72. align-items: center;
  73. width: 100%;
  74. height: 100%;
  75. }
  76. .bx-menu-breadcrumb li.bx-menu-bc-item > a:hover span {
  77. color: rgba(255, 255, 255, 0.85);
  78. }
  79. .bx-menu-breadcrumb li.bx-menu-bc-item > a img,
  80. .bx-menu-breadcrumb li.bx-menu-bc-item > a svg {
  81. width: 1.625rem;
  82. height: 1.625rem;
  83. }
  84. .bx-menu-breadcrumb li.bx-menu-bc-item:not(:last-child) > a svg g {
  85. opacity: 0.7;
  86. }
  87. .bx-menu-breadcrumb li.bx-menu-bc-item:not(:last-child) > a:hover svg g {
  88. opacity: 0.85;
  89. }
  90. /*--- Widgets (Center) ---*/
  91. div.bx-std-menu-top .bx-menu-top-center {
  92. padding: 0;
  93. margin: 0;
  94. list-style: none;
  95. }
  96. div.bx-std-menu-top .bx-menu-top-center li {
  97. position: relative;
  98. display: -webkit-flex;
  99. display: flex;
  100. -webkit-justify-content: center;
  101. justify-content: center;
  102. -webkit-align-items: center;
  103. align-items: center;
  104. width: 4.5rem;
  105. height: 4.5rem;
  106. }
  107. /*
  108. * Vertical divider between static and dynamic menu items.
  109. *
  110. div.bx-std-menu-top .bx-menu-top-center li.bx-menu-item-static + li.bx-menu-item-dynamic {
  111. border-left: 1px solid rgba(240, 240, 240, 0.2);
  112. }
  113. */
  114. div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active a {
  115. border-color: rgba(37, 99, 235, 0.8);
  116. }
  117. div.bx-std-menu-top .bx-menu-top-center li a {
  118. display: block;
  119. box-sizing: content-box;
  120. width: 3rem;
  121. height: 3rem;
  122. }
  123. div.bx-std-menu-top .bx-menu-top-center li .bx-mi-icon {
  124. border-radius: 0.625rem;
  125. overflow: hidden;
  126. }
  127. div.bx-std-menu-top .bx-menu-top-center li img,
  128. div.bx-std-menu-top .bx-menu-top-center li .sys-icon {
  129. display: block;
  130. box-sizing: content-box;
  131. width: 3rem;
  132. height: 3rem;
  133. margin: 0;
  134. }
  135. div.bx-std-menu-top .bx-menu-top-center li .sys-icon {
  136. font-size: 1.5rem;
  137. color: rgba(255, 255, 255, 0.7);
  138. }
  139. div.bx-std-menu-top .bx-menu-top-center li .bx-mi-title {
  140. margin-top: 0.25rem;
  141. font-size: 0.75rem;
  142. font-weight: normal;
  143. color: rgba(255, 255, 255, 0.7);
  144. text-overflow: ellipsis;
  145. overflow: hidden;
  146. }
  147. /*--- Toolbar (Right) ---*/
  148. div.bx-std-menu-top .bx-menu-toolbar {
  149. position: relative;
  150. display: -webkit-flex;
  151. display: flex;
  152. -webkit-flex-wrap: nowrap;
  153. flex-wrap: nowrap;
  154. -webkit-justify-content: flex-end;
  155. justify-content: flex-end;
  156. }
  157. div.bx-std-menu-top .bx-menu-toolbar li {
  158. position: relative;
  159. float: none;
  160. display: block;
  161. height: 3.0rem;
  162. min-width: 3.0rem;
  163. border-radius: 1.5rem;
  164. background-color: rgba(17, 24, 39, 1);
  165. line-height: 3.0rem;
  166. overflow: hidden;
  167. }
  168. div.bx-std-menu-top .bx-menu-toolbar li.bx-menu-tab-search {
  169. position: relative;
  170. display: -webkit-flex;
  171. display: flex;
  172. -webkit-align-items: center;
  173. align-items: center;
  174. -webkit-flex-wrap: nowrap;
  175. flex-wrap: nowrap;
  176. }
  177. div.bx-std-menu-top .bx-menu-toolbar li.bx-menu-tab-search .bx-form-input-text {
  178. height: 3rem;
  179. padding-left: 0.5rem;
  180. padding-right: 0.5rem;
  181. border-width: 0;
  182. background-color: transparent;
  183. color: rgba(255, 255, 255, 1);
  184. }
  185. div.bx-std-menu-top .bx-menu-toolbar li a {
  186. position: relative;
  187. display: -webkit-flex;
  188. display: flex;
  189. -webkit-justify-content: center;
  190. justify-content: center;
  191. -webkit-align-items: center;
  192. align-items: center;
  193. width: 100%;
  194. height: 100%;
  195. border-radius: 1.5rem;
  196. backgroud-color: rgba(55, 65, 81, 1);
  197. }
  198. div.bx-std-menu-top .bx-menu-toolbar li svg g {
  199. opacity: 0.7;
  200. }
  201. div.bx-std-menu-top .bx-menu-toolbar li:hover {
  202. background-color: rgba(31, 41, 55, 1);
  203. }
  204. div.bx-std-menu-top .bx-menu-toolbar li:hover svg g {
  205. opacity: 0.85;
  206. }
  207. div.bx-std-menu-top i.sys-icon {
  208. -webkit-transition: all 0.2s ease-in-out;
  209. transition: all 0.2s ease-in-out;
  210. }
  211. div.bx-std-menu-top-right li.bx-menu-tab-active i.sys-icon {
  212. color: #ffe900;
  213. text-shadow: 0 0 4px #ffe900;
  214. }
  215. /*--- Account, Actions, Help and Settings popups ---*/
  216. body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
  217. #bx-std-pcap-menu-popup-help,
  218. #bx-std-pcap-menu-popup-actions,
  219. #bx-std-pcap-menu-popup-account {
  220. overflow: visible;
  221. }
  222. .bx-std-mod-popup-settings-wrapper::before,
  223. #bx-std-pcap-menu-popup-help:before,
  224. #bx-std-pcap-menu-popup-actions:before,
  225. #bx-std-pcap-menu-popup-account::before {
  226. position: absolute;
  227. display: block;
  228. content: '';
  229. top: 0.3rem;
  230. right: 1.0rem;
  231. width: 0.5rem;
  232. height: 0.5rem;
  233. box-shadow: inset 1px 1px 0px rgba(240, 240, 240, 0.2);
  234. background-color: #001529;
  235. transform: rotate(45deg);
  236. }
  237. .bx-std-mod-popup-settings-wrapper .bx-popup-gap,
  238. #bx-std-pcap-menu-popup-help .bx-popup-gap,
  239. #bx-std-pcap-menu-popup-actions .bx-popup-gap,
  240. #bx-std-pcap-menu-popup-account .bx-popup-gap {
  241. margin-left: 0;
  242. margin-right: 0;
  243. }
  244. #bx-std-pcap-menu-popup-help .bx-popup,
  245. #bx-std-pcap-menu-popup-actions .bx-popup,
  246. #bx-std-pcap-menu-popup-account .bx-popup,
  247. .bx-std-mod-popup-settings-wrapper.bx-popup-applied:not(.bx-popup-chain) .bx-popup {
  248. box-shadow: inset -1px -1px 0px rgba(240, 240, 240, 0.2), inset 1px 1px 0px rgba(240, 240, 240, 0.2);
  249. background-color: #001529;
  250. }
  251. #bx-std-pcap-menu-popup-actions .bx-popup-content {
  252. padding: 1.0rem;
  253. }
  254. #bx-std-pcap-menu-popup-account .bx-popup-content {
  255. padding: 0.5rem 0;
  256. }
  257. #bx-std-pcap-menu-popup-account .bx-popup li {
  258. position: relative;
  259. height: 2.5rem;
  260. margin: 0;
  261. padding: 0 1rem;
  262. white-space: nowrap;
  263. line-height: 2.5rem;
  264. font-size: 0.875rem;
  265. font-weight: 400;
  266. overflow: hidden;
  267. }
  268. #bx-std-pcap-menu-popup-account .bx-popup li a {
  269. position: relative;
  270. display: -webkit-flex;
  271. display: flex;
  272. -webkit-align-items: center;
  273. align-items: center;
  274. }
  275. #bx-std-pcap-menu-popup-account .bx-popup li svg {
  276. margin-right: 0.25rem;
  277. }
  278. .bx-std-mod-popup-settings-wrapper,
  279. #bx-std-pcap-menu-popup-help .bx-popup,
  280. #bx-std-pcap-menu-popup-help .bx-popup a,
  281. #bx-std-pcap-menu-popup-help .bx-popup .sys-icon,
  282. #bx-std-pcap-menu-popup-actions .bx-popup,
  283. #bx-std-pcap-menu-popup-account .bx-popup li a,
  284. #bx-std-pcap-menu-popup-account .bx-popup li .sys-icon {
  285. color: rgba(255, 255, 255, 0.7);
  286. }
  287. #bx-std-pcap-menu-popup-account .bx-popup li svg g {
  288. opacity: 0.7;
  289. }
  290. #bx-std-pcap-menu-popup-help .bx-popup a:hover,
  291. #bx-std-pcap-menu-popup-account .bx-popup li:hover a,
  292. #bx-std-pcap-menu-popup-account .bx-popup li:hover a .sys-icon {
  293. color: rgba(255, 255, 255, 0.85);
  294. }
  295. #bx-std-pcap-menu-popup-account .bx-popup li.bx-menu-tab-active {
  296. background-color: rgba(24, 144, 255, 0.2);
  297. box-shadow: inset 3px 0px 0px rgba(24, 144, 255, 1.0);
  298. }
  299. #bx-std-pcap-menu-popup-account .bx-popup li:hover svg g,
  300. #bx-std-pcap-menu-popup-account .bx-popup li.bx-menu-tab-active svg g {
  301. opacity: 0.85;
  302. }
  303. .bx-std-mod-popup-settings-wrapper .bx-form-input-select {
  304. border-color: rgb(55, 65, 81, 1.0);
  305. background-color: rgb(17, 24, 39, 1.0);
  306. }