menu_top.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  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. div.bx-std-menu-top.bx-std-menu-top-left,
  19. div.bx-std-menu-top.bx-std-menu-top-center,
  20. div.bx-std-menu-top.bx-std-menu-top-right {
  21. -webkit-flex: 0 1 auto;
  22. flex: 0 1 auto;
  23. }
  24. div.bx-std-menu-top.bx-std-menu-top-left,
  25. div.bx-std-menu-top.bx-std-menu-top-right {
  26. position: relative;
  27. z-index: 2;
  28. min-width: 10%;
  29. }
  30. div.bx-std-menu-top.bx-std-menu-top-center {
  31. z-index: 1;
  32. -webkit-flex-grow: 1;
  33. flex-grow: 1;
  34. height: 3.5rem;
  35. }
  36. div.bx-std-menu-top:nth-child(1).bx-std-menu-top-center {
  37. position: relative;
  38. display: -webkit-flex;
  39. display: flex;
  40. }
  41. div.bx-std-menu-top:nth-child(2).bx-std-menu-top-center .bx-std-menu-top-center-cnt {
  42. position: absolute;
  43. left: 0;
  44. width: 100vw;
  45. }
  46. div.bx-std-menu-top-center ul {
  47. position: relative;
  48. display: -webkit-flex;
  49. display: flex;
  50. -webkit-align-items: stretch;
  51. align-items: stretch;
  52. -webkit-flex-wrap: nowrap;
  53. flex-wrap: nowrap;
  54. }
  55. div.bx-std-menu-top-left {
  56. padding-left: 1rem;
  57. line-height: 4rem;
  58. text-align: left;
  59. font-size: 1.5rem;
  60. }
  61. div.bx-std-menu-top-right {
  62. padding-right: 1rem;
  63. text-align: right;
  64. }
  65. /*--- Breadcrumb (Left) ---*/
  66. div.bx-std-menu-top .bx-menu-breadcrumb {
  67. position: relative;
  68. display: -webkit-flex;
  69. display: flex;
  70. -webkit-flex-wrap: nowrap;
  71. flex-wrap: nowrap;
  72. -webkit-align-items: center;
  73. align-items: center;
  74. }
  75. /*--- Widgets (Center) ---*/
  76. div.bx-std-menu-top .bx-menu-top-center {
  77. display: flex;
  78. justify-content: center;
  79. align-items: center;
  80. gap: 0.25rem;
  81. padding: 0;
  82. margin: 0;
  83. list-style: none;
  84. }
  85. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item,
  86. div.bx-std-menu-top .bx-menu-top-center li {
  87. position: relative;
  88. display: -webkit-flex;
  89. display: flex;
  90. -webkit-justify-content: center;
  91. justify-content: center;
  92. -webkit-align-items: center;
  93. align-items: center;
  94. width: 3.5rem;
  95. height: 3.5rem;
  96. }
  97. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-div img {
  98. height: 2.0rem;
  99. }
  100. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item.bx-menu-bc-page {
  101. width: auto;
  102. padding-left: 0.5rem;
  103. padding-right: 0.5rem;
  104. }
  105. /*
  106. * Vertical divider between static and dynamic menu items.
  107. *
  108. div.bx-std-menu-top .bx-menu-top-center li.bx-menu-item-static + li.bx-menu-item-dynamic {
  109. border-left: 1px solid rgba(240, 240, 240, 0.2);
  110. }
  111. */
  112. .bx-menu-breadcrumb li.bx-menu-bc-item > a,
  113. div.bx-std-menu-top .bx-menu-top-center li a {
  114. display: block;
  115. z-index: 2;
  116. box-sizing: content-box;
  117. width: 2.5rem;
  118. height: 2.5rem;
  119. }
  120. .bx-menu-breadcrumb li.bx-menu-bc-item > a {
  121. display: -webkit-flex;
  122. display: flex;
  123. -webkit-align-items: center;
  124. align-items: center;
  125. width: auto;
  126. }
  127. div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active a {
  128. border-color: rgba(37, 99, 235, 0.8);
  129. }
  130. div.bx-std-menu-top .bx-menu-top-center li .bx-mi-bg {
  131. position: absolute;
  132. display: none;
  133. z-index: 1;
  134. top: 0;
  135. left: 0;
  136. width: 100%;
  137. height: 100%;
  138. filter: blur(6px);
  139. }
  140. div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active .bx-mi-bg {
  141. display: block;
  142. }
  143. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .bx-mi-icon,
  144. div.bx-std-menu-top .bx-menu-top-center li .bx-mi-icon {
  145. overflow: hidden;
  146. }
  147. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .bx-mi-icon {
  148. border-radius: 1.5rem;
  149. }
  150. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .bx-mi-title {
  151. text-align: center;
  152. letter-spacing: -0.02em;
  153. font-size: 1.5rem;
  154. font-weight: 500;
  155. color: rgb(243, 244, 246);
  156. }
  157. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item img,
  158. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item:not(.bx-menu-tab-search) svg,
  159. div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .sys-icon,
  160. div.bx-std-menu-top .bx-menu-top-center li img,
  161. div.bx-std-menu-top .bx-menu-top-center li .sys-icon {
  162. display: block;
  163. box-sizing: content-box;
  164. width: 2.5rem;
  165. height: 2.5rem;
  166. margin: 0;
  167. }
  168. div.bx-std-menu-top .bx-menu-top-center li img {
  169. position: relative;
  170. z-index: -1;
  171. }
  172. div.bx-std-menu-top .bx-menu-top-center li .sys-icon {
  173. font-size: 1.5rem;
  174. color: rgba(255, 255, 255, 0.7);
  175. }
  176. div.bx-std-menu-top .bx-menu-top-center li .bx-mi-title {
  177. margin-top: 0.25rem;
  178. font-size: 0.75rem;
  179. font-weight: normal;
  180. color: rgba(255, 255, 255, 0.7);
  181. text-overflow: ellipsis;
  182. overflow: hidden;
  183. }
  184. div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-divider {
  185. width: 0.25rem;
  186. height: 1.75rem;
  187. }
  188. /*--- Search box (Top Left\Center\Right) ---*/
  189. div.bx-std-menu-top ul li.bx-menu-tab-search {
  190. overflow: visible;
  191. }
  192. div.bx-std-menu-top ul li.bx-menu-tab-search > div {
  193. position: absolute;
  194. display: -webkit-flex;
  195. display: flex;
  196. -webkit-align-items: center;
  197. align-items: center;
  198. -webkit-flex-wrap: nowrap;
  199. flex-wrap: nowrap;
  200. width: 2.5rem;
  201. height: 2.5rem;
  202. right: 0;
  203. border-radius: 1.5rem;
  204. }
  205. div.bx-std-menu-top ul.bx-menu-breadcrumb li.bx-menu-tab-search > div {
  206. left: 0.5rem;
  207. right: auto;
  208. }
  209. div.bx-std-menu-top ul li.bx-menu-tab-search.bx-mt-active > div {
  210. width: 13.75rem;
  211. }
  212. div.bx-std-menu-top ul li.bx-menu-tab-search .bx-form-input-text {
  213. height: 2.5rem;
  214. padding-left: 0.5rem;
  215. padding-right: 0.5rem;
  216. border-width: 0;
  217. background-color: transparent;
  218. font-style: normal;
  219. font-weight: 500;
  220. }
  221. /*--- Toolbar (Right) ---*/
  222. div.bx-std-menu-top .bx-menu-toolbar {
  223. position: relative;
  224. display: -webkit-flex;
  225. display: flex;
  226. -webkit-flex-wrap: nowrap;
  227. flex-wrap: nowrap;
  228. -webkit-justify-content: flex-end;
  229. justify-content: flex-end;
  230. }
  231. div.bx-std-menu-top .bx-menu-toolbar li {
  232. position: relative;
  233. float: none;
  234. display: block;
  235. height: 2.5rem;
  236. min-width: 2.5rem;
  237. border-radius: 1.5rem;
  238. background-color: rgba(17, 24, 39, 1);
  239. line-height: 2.5rem;
  240. overflow: hidden;
  241. }
  242. div.bx-std-menu-top .bx-menu-toolbar li:not(.bx-menu-tab-search) a {
  243. position: relative;
  244. display: -webkit-flex;
  245. display: flex;
  246. -webkit-justify-content: center;
  247. justify-content: center;
  248. -webkit-align-items: center;
  249. align-items: center;
  250. width: 100%;
  251. height: 100%;
  252. border-radius: 1.5rem;
  253. }
  254. div.bx-std-menu-top .bx-menu-toolbar li a:hover {
  255. color: #ffffff;
  256. }
  257. div.bx-std-menu-top .bx-menu-toolbar li svg g {
  258. opacity: 0.7;
  259. }
  260. div.bx-std-menu-top .bx-menu-toolbar li:hover {
  261. background-color: rgba(31, 41, 55, 1);
  262. }
  263. div.bx-std-menu-top .bx-menu-toolbar li:hover svg g {
  264. opacity: 0.85;
  265. }
  266. div.bx-std-menu-top i.sys-icon {
  267. -webkit-transition: all 0.2s ease-in-out;
  268. transition: all 0.2s ease-in-out;
  269. }
  270. div.bx-std-menu-top-right li.bx-menu-tab-active i.sys-icon {
  271. color: #ffe900;
  272. text-shadow: 0 0 4px #ffe900;
  273. }
  274. /*--- Account, Actions, Help and Settings popups ---*/
  275. body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
  276. #bx-std-pcap-menu-popup-help,
  277. #bx-std-pcap-menu-popup-assistant,
  278. #bx-std-pcap-menu-popup-actions,
  279. #bx-std-pcap-menu-popup-account,
  280. #bx-std-pmenu-popup-actions {
  281. overflow: visible;
  282. }
  283. .bx-std-mod-popup-settings-wrapper .bx-popup-gap,
  284. #bx-std-pcap-menu-popup-help .bx-popup-gap,
  285. #bx-std-pcap-menu-popup-assistant .bx-popup-gap,
  286. #bx-std-pcap-menu-popup-actions .bx-popup-gap,
  287. #bx-std-pcap-menu-popup-account .bx-popup-gap,
  288. #bx-std-pmenu-popup-actions .bx-popup-gap {
  289. margin-left: 0;
  290. margin-right: 0;
  291. }
  292. #bx-std-pcap-menu-popup-help .bx-popup,
  293. #bx-std-pcap-menu-popup-assistant .bx-popup,
  294. #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header-color-bg,
  295. #bx-std-pcap-menu-popup-actions .bx-popup,
  296. #bx-std-pcap-menu-popup-account .bx-popup,
  297. .bx-std-mod-popup-settings-wrapper.bx-popup-applied:not(.bx-popup-chain) .bx-popup {
  298. border-width: 0;
  299. background-color: #001529;
  300. }
  301. #bx-std-pcap-menu-popup-actions .bx-popup-content,
  302. #bx-std-pmenu-popup-actions .bx-popup-content {
  303. padding: 1.0rem;
  304. }
  305. #bx-std-pcap-menu-popup-account .bx-popup-content {
  306. padding: 0.5rem 0;
  307. }
  308. #bx-std-pcap-menu-popup-account .bx-popup li {
  309. position: relative;
  310. height: 2.5rem;
  311. margin: 0;
  312. padding: 0 1rem;
  313. white-space: nowrap;
  314. line-height: 2.5rem;
  315. font-size: 0.875rem;
  316. font-weight: 400;
  317. overflow: hidden;
  318. }
  319. #bx-std-pcap-menu-popup-account .bx-popup li a {
  320. position: relative;
  321. display: -webkit-flex;
  322. display: flex;
  323. -webkit-align-items: center;
  324. align-items: center;
  325. }
  326. #bx-std-pcap-menu-popup-account .bx-popup li svg {
  327. margin-right: 0.75rem;
  328. }
  329. .bx-std-mod-popup-settings-wrapper,
  330. #bx-std-pcap-menu-popup-help .bx-popup,
  331. #bx-std-pcap-menu-popup-help .bx-popup a,
  332. #bx-std-pcap-menu-popup-help .bx-popup .sys-icon,
  333. #bx-std-pcap-menu-popup-assistant .bx-popup,
  334. #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header h2,
  335. #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header .bx-icon,
  336. #bx-std-pcap-menu-popup-assistant .bx-popup a,
  337. #bx-std-pcap-menu-popup-assistant .bx-popup .sys-icon,
  338. #bx-std-pcap-menu-popup-actions .bx-popup,
  339. #bx-std-pcap-menu-popup-account .bx-popup li a,
  340. #bx-std-pcap-menu-popup-account .bx-popup li .sys-icon {
  341. color: rgba(255, 255, 255, 0.7);
  342. }
  343. #bx-std-pcap-menu-popup-account .bx-popup li svg g {
  344. opacity: 0.7;
  345. }
  346. #bx-std-pcap-menu-popup-help .bx-popup a:hover,
  347. #bx-std-pcap-menu-popup-assistant .bx-popup a:hover,
  348. #bx-std-pcap-menu-popup-account .bx-popup li:hover a,
  349. #bx-std-pcap-menu-popup-account .bx-popup li:hover a .sys-icon {
  350. color: rgba(255, 255, 255, 0.85);
  351. }
  352. #bx-std-pcap-menu-popup-account .bx-popup li.bx-menu-tab-active {
  353. background-color: rgba(24, 144, 255, 0.2);
  354. box-shadow: inset 3px 0px 0px rgba(24, 144, 255, 1.0);
  355. }
  356. #bx-std-pcap-menu-popup-account .bx-popup li:hover svg g,
  357. #bx-std-pcap-menu-popup-account .bx-popup li.bx-menu-tab-active svg g {
  358. opacity: 0.85;
  359. }
  360. .bx-std-mod-popup-settings-wrapper .bx-form-input-select {
  361. border-color: rgb(55, 65, 81, 1.0);
  362. background-color: rgb(17, 24, 39, 1.0);
  363. }
  364. /*--- Assistant ---*/
  365. #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header {
  366. border-bottom: 1px solid rgb(31 41 55);
  367. }
  368. #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-content {
  369. padding-top: 0;
  370. }
  371. .bx-std-pcap-assistant div.cmts {
  372. max-height: calc(0.5 * 100vh);
  373. overflow-y: auto;
  374. }
  375. .bx-std-pcap-assistant div.cmts > ul.cmts {
  376. margin-top: 1rem;
  377. }
  378. .bx-std-pcap-assistant .cmt > .cmts {
  379. display: none;
  380. }
  381. .bx-std-pcap-assistant .cmt .cmt-head .cmt-meta {
  382. margin-right: 0;
  383. color: rgb(156 163 175);
  384. }
  385. .bx-std-pcap-assistant .cmt .cmt-head ul li:first-child .bx-base-general-unit-meta-div {
  386. display: none;
  387. }
  388. .bx-std-pcap-assistant .cmt .cmt-cont .cmt-body {
  389. color: rgb(229, 231, 235);
  390. }
  391. .bx-std-pcap-assistant .cmt-reply.cmt-reply-bottom {
  392. margin-bottom: 0;
  393. }
  394. .bx-std-pcap-assistant .bx-form-section-content {
  395. display: flex;
  396. }
  397. .bx-std-pcap-assistant .bx-form-section-content > .bx-form-element-wrapper:first-child {
  398. flex: 1 1 auto;
  399. }
  400. .bx-std-pcap-assistant .bx-form-section-content > .bx-form-element-wrapper:last-child {
  401. flex: 0 0 auto;
  402. margin: 0 0 0 1rem;
  403. }
  404. .bx-std-pcap-assistant .bx-form-value .bx-form-input-textarea {
  405. height: 2.5rem;
  406. background-color: rgb(31 41 55);
  407. }